For loop v-if内部v-for显示所有实例（Vue）

我在v-for里有一个v-if。我想在里面有一个按钮，可以开关内容，但点击一个实例将打开页面上的所有实例。如何仅打开和关闭单击的特定div

这是代码

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="showNote = !showNote">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="showNote">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

注
{{user_leav.note}

---

谢谢

您可以在

用户列表中添加
showNote

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="user_leav.showNote = !user_leav.showNote">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="user_leav.showNote">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

对于第二种解决方案，每次过滤器更改时，您必须让一个观察者“重新初始化”showNote

数组

watch: {
  user_leave_filitered(newVal) {
    // Requires polyfill
    this.showNote = new Array(newVal.length).fill(false)
    // Or
    this.showNote = new Array(newVal.length);
    for( note of this.showNote ) {
      note = false;
    }
  }
}

---

请记住：在Edge中不受支持，因此需要polyfill。

您可以在

用户列表中添加
showNote

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="user_leav.showNote = !user_leav.showNote">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="user_leav.showNote">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

对于第二种解决方案，每次过滤器更改时，您必须让一个观察者“重新初始化”showNote

数组

watch: {
  user_leave_filitered(newVal) {
    // Requires polyfill
    this.showNote = new Array(newVal.length).fill(false)
    // Or
    this.showNote = new Array(newVal.length);
    for( note of this.showNote ) {
      note = false;
    }
  }
}

---

请记住：在Edge中不受支持，因此需要polyfill。

使用函数操作数据并检查是否已单击id

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="toggle(user_leav)">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="checkNote(user_leav.id)">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

---

使用函数操作数据并检查是否已单击id

<div v-for="user_leav in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="toggle(user_leav)">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="checkNote(user_leav.id)">
      <p>{{ user_leav.note }} </p>
    </div>
  </div>
</div>

---

我还需要定义什么吗。它与您的代码没有任何关系。我的数据是“showNote:[]”我是否需要定义其他内容。它与您的代码没有任何关系。我的数据是“showNote:[]”