Javascript 如何使用Vue.js仅更改特定块的数据值？

我将创建一个简单的Vue.js应用程序，在我的应用程序中，我有计数器块，我用

v-for

渲染，在我的

数据中，我有'counter:0'实例，我想在单击发生时只增加和减少元素的一个块，现在我有不想要的行为，按下按钮时，两个块的数值都会改变。
我怎样才能解决这个问题


var example1=新的Vue({
el:“#示例1”，
数据：{
柜台:0
},
方法：{
增量（）{
这个柜台++
},
减量{
这个柜台--
}
}
})
.firs comp{
边框：2倍纯红；
边缘顶部：10px；
边缘底部：10px；
}

加1
上面的按钮已被点击{{counter}}次

删除1
加1
上面的按钮已被点击{{counter}}次

删除1
对计数器使用数组，如下所示


var example1=新的Vue({
el:“#示例1”，
数据：{
计数器：新数组（2）。填充（0）
},
方法：{
增量（i）{
此计数器拼接（i，1，此计数器[i]+1）
},
减量（一）{
这个计数器拼接（i，1，这个计数器[i]-1）
},
}
})
.firs comp{
边框：2倍纯红；
边缘顶部：10px；
边缘底部：10px；
}

加1
上面的按钮已被单击{{计数器[0]}}次

删除1
加1
上面的按钮已被点击{{counter[1]}}次

删除1
试试这个


var example1=新的Vue({
el:“#示例1”，
数据：{
柜台：{
1 : 0,
2 : 0
}
},
方法：{
增量（i）{
设counterdata=this.counter[i]；
this.counter={…this.counter[i]：counterdata+1}；
},
减量（一）{
设counterdata=this.counter[i]；
this.counter={…this.counter[i]：counterdata-1}；
}
}
})
.firs comp{
边框：2倍纯红；
边缘顶部：10px；
边缘底部：10px；
}

添加{{i}
上面的按钮已被点击{{counter[i]}}次

删除{{i}
看看我用数组编写的解决方案，我刚刚修复了它，因为这两种方法都在增加相同的数据源。如果要将它们分开，最好的方法是创建一个独立的计数器组件，并在模板中使用它两次。这将使他们的计数数据完全分离，同时也使您的代码保持干燥。