在 v-for 列表中显示元素：VueJS [重复]

Question

我有一个 v-for，它显示我的所有项目，并且每个项目都有一个面板（用于修改和删除），但是当我单击此按钮以显示我的面板时，它会出现在我的所有项目上。我怎样才能避免这种情况？当我点击修改按钮时，这是同样的事情，修改我的项目的输入出现在每个元素上。

这是我的代码：

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

以及方法和数据：

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

所有项目的show、editing、active、inactive 状态相同。因此，如果您更改一项的某些数据属性，它会更改所有项。 有很多方法可以实现您想要的。

最简单的方法是按索引管理数据。 例如：

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

这种方法的主要问题 - 您一次只能显示/编辑一个项目。 如果您需要更复杂的逻辑并且想管理多个项目，我建议为您的项目创建一个单独的组件，每个组件都有自己的状态（show、editing 等）

Answer 2

@NaN 的方法适用于您一次只打开一个。如果您希望有可能同时打开多个，则需要跟踪每个单独的元素。现在你只是基于show。对于所有元素，它只能是true/false。

所以这就是你需要做的：

将 show 从布尔值更改为数组

data() {
  return {
    show: [],
    editing: null,
    active: true,
    inactive: true,

  }
},

然后你可以跟踪哪个元素应该有面板：

<div v-on:click="toggleActive(index)">

以及方法：

methods: {
   toggleActive(index) {
      if (this.show.includes(index)) {
        this.show = this.show.filter(entry => entry !== index);

        return; 
      }

      this.show.push(index);
   }
}

最后你的v-if 变成：

<div v-if="show.includes(index)">