v-if внутри v-for показывает все экземпляры (Vue)

Question

У меня есть v-if внутри v-for.Я хочу, чтобы внутри была кнопка, которая могла бы включать и выключать контент, но щелчок по одному экземпляру откроет все экземпляры на странице.Как я могу открыть и закрыть только тот 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>

Спасибо

Answer 1

Используйте функции для манипулирования данными и проверки, был ли выбран идентификатор.

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

Answer 2

Вы можете добавить showNote в user_leav

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

Имейте в виду: Array.prototype.fill не поддерживается в Edge, поэтому потребуется полифилл.