show element in v-for list: VueJS [duplicate]

Question

I have a v-for which display all my items and I have a panel for each items (to modify and delete) but when I click on this button to display my panel, it appears on all of my items. How can I avoid that ? This is the same thing when I click on modify button, the input to modify my item appears on each element.

There is my code :

<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 the methods & data :

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
   }
}

Answer 1

You have the same show, editing, active, inactive state for all items. So if you change some data property for one item it changed for all. There are a lot of ways to achieve what you want.

The easiest is to manage your data by index. For example:

<div v-on:click="showIndex = index">
  <div v-if="showIndex === index">
  ...
data () {
  return {
    showIndex: null
  ...

The main problem with this approach - you can show/edit only one item at the time. If you need more complicated logic and whant to manage more then one item at the time I suggest to create a separate component for your items and each will have own state (show, editing etc.)