v-if inside v-for 显示所有实例（Vue）答案

【问题标题】：v-if inside v-for shows all instances (Vue)v-if inside v-for 显示所有实例（Vue）
【发布时间】：2018-11-08 21:47:52
【问题描述】：

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

谢谢

【问题讨论】：

标签： for-loop if-statement vue.js

【解决方案1】：

您可以在user_leav 中添加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 定义为数组

<div v-for="(user_leav, index ) in user_leave_filtered" v-bind:key="user_leav.id">
  <div class="container">
    <div v-if="user_leav.note" v-on:click="showNote[index] = !showNote[index]">
      <h4>Note</h4>
    </div>
    <div class="note" v-if="showNote[index]">
      <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 不支持 Array.prototype.fill，因此需要一个 polyfill。

【讨论】：

我是否需要定义其他内容。它对您的代码没有任何作用。我的数据是“showNote：[]”

【解决方案2】：

使用函数来操作数据并检查 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>

然后在数组中添加和删除项并检查该数组。

data () {
    return {
      showNote: []
    }
  },   
methods: {
  toggle: function (userLeavePassed) {
    if (this.showNote.includes(userLeavePassed.id)) {
      var index = this.showNote.indexOf(userLeavePassed.id)
      if (index > -1) {
        this.showNote.splice(index, 1)
      }
    } else {
      this.showNote.push(userLeavePassed.id)
    }
  },
  checkNote: function(notePassed) {
    if (this.showNote.includes(notePassed)) {
      return true
    } else {
      return false
    }
  }
}

【讨论】：