v-for内部的v-if显示所有实例(Vue) [英] v-if inside v-for shows all instances (Vue)

问题描述

我在v-for中有一个v-if.我想在其中有一个按钮，该按钮可以打开和关闭内容，但是单击一个实例将打开页面上的所有实例.如何只能打开和关闭单击的特定div.

I have a v-if inside a v-for. I want to have a button inside that can toggle content on and off but a click on one instance will open all instances on the page. How I can I only open and close the particular div that I click.

这是代码.

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

谢谢

推荐答案

使用函数来操纵数据并检查是否单击了ID.

Use functions to manipulate the data and check if the id has been clicked.

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

然后在数组中添加添加和删除项，并对照该数组进行检查.

And then add add and remove items from an array and check against that array.

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

这篇关于v-for内部的v-if显示所有实例(Vue)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！