Question

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

由于

Answer 1

您可以在<script type="text/javascript"> function scan(){ cordova.plugins.barcodeScanner.scan( function (result) { var qrc = result.text; document.getElementById("qrc").value=qrc.toString(); }, function (error) { alert("Scanning failed: " + error); }); } </script>

中添加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

请注意：Edge不支持Array.prototype.fill，因此需要填充。

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

v-如果在v-for内显示所有实例（Vue）

2 个答案: