I am looking to develop a basic Vue.js application. Within this app, I have multiple counter blocks that are rendered using the v-for directive. In my data object, I initialize a 'counter: 0' instance. My goal is to increment and decrement only one specific block when a button is clicked. However, I am currently facing an issue where both block values change simultaneously upon a button click event.
How can I go about resolving this problem?
let example1 = new Vue({
el: '#example-1',
data: {
counter: 0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
}).firs-comp{
border:2px solid red;
margin-top:10px;
margin-bottom:10px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="example-1">
<div class="firs-comp">
<button v-on:click="increment">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
<button v-on:click="decrement">Remove 1</button>
</div>
<div class="firs-comp">
<button v-on:click="increment">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
<button v-on:click="decrement">Remove 1</button>
</div>
</div>