I am facing an issue with my v-for loop which displays all the items along with a panel for each item that allows modification and deletion. However, when I click on these buttons to display the panel or modify an item, it affects all of the items instead of just one. How can I fix this so that it only applies to the specific item I clicked on?
Here is the code snippet:
<div v-for="(comment, index) in comments" :list="index" :key="comment">
<div v-on:click="show = !show">
<div v-if="show">
<button @click="edit(comment), active = !active, inactive = !inactive">
Modify
</button>
<button @click="deleteComment(comment)">
Delete
</button>
</div>
</div>
<div>
<p :class="{ active: active }">
{{ comment.content }}
</p>
<input :class="{ inactive: inactive }" type="text" v-model="comment.content" @keyup.enter="doneEdit">
</div>
</div>
And here are the methods and data being used:
data() {
return {
show: false,
editing: null,
active: true,
inactive: true
}
},
methods: {
edit(comment) {
this.editing = comment
this.oldComment = comment.content
},
doneEdit() {
this.editing = null
this.active = true
this.inactive = true
}
}