How can I make the buttons increase separately? I've tried similar solutions, but they currently increase the number of likes and dislikes together at the same time. Additionally, I am receiving this message in the console:
vue@next:1250 [Vue warn]: Property "counter" was accessed during render but is not defined on instance. at
<div class="container">
<div class="comment--like--dislike--app">
<div
v-for="(comment, index) in comments" :key="index"
class="card mb-10 comment--item"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
deserunt, tempore accusamus iusto nobis dolore ratione itaque
perferendis delectus? Nostrum corporis, quod voluptates quis
consequuntur eveniet beatae dolor aperiam ad.
</p>
<div class="action--button--container text-right mt-10">
<button v-on:click="increment(index)" v-bind:id="comments.id" class="btn-sm btn-success">
Like ({{comments.counter}})
</button>
<button v-on:click="increment(index)" v-bind:id="comments.id" class="btn-sm btn-danger">
Dislike ({{comments.counter}})
</button>
</div>
</div>
This is the current Vue code being used:
const app = Vue.createApp({
data() {
return {
comments: [{
id: 1,
counter:0
},
{
id: 2,
counter:0
},
],
};
},
methods: {
increment: function(index) {
this.comments[index].counter++;
},
},
}).mount(".container");