Vue v-for 点击不正确显示元素

Question

for` 显示数据库中的数据：

<div v-for="item in resourceList" :key="item.id">
    <input :id="roomData.id" type="checkbox" @click="saveCheckbox">
    <label :for="roomData.id">{{ item.question }}</label>

        //calendar
        <span v-if="active">
            <datepicker v-model="date"></datepicker>
        </span>
        <span v-else id="disableCalendar">Not show calendar</span>
</div>

我的功能点击有问题。例如在页面 v-for 上显示 10 个元素。在每个元素中都会有一个单击按钮 @click="saveCheckbox"。

方法中的函数：

saveCheckbox(e){            
    if(e.target.checked) {
        this.active = true;
    } else {
        this.active = false;
    }
}

在我的数据中：

active = false;

现在当用户点击第一个元素按钮时，日历将出现在每个元素中。我如何才能仅在用户点击的元素中显示日历？

Answer 1

您需要在循环中存储每个项目的值。使用 this.active = true 时，您只有一种状态可用于循环中的每个项目。

示例：

new Vue({
  el: "#app",
  data: {
    isActive: [false, false, false, false]
  },
  methods: {
    toggleActive(index) {
      this.$set(this.isActive, index, !this.isActive[index])
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(active, index) in isActive" :key="index">
    {{ active }} {{ index }}
    <button type="button" @click="toggleActive(index)">Toggle</button>
  </div>
</div>

Answer 2

active 变量为您的 resourceList 中的每个项目共享，您需要为列表中的每个项目创建活动标识符，一种方法是让 active 属性的资源列表项。假设你在resourceList的每一项中都有active 属性，你可以进行如下操作。

<div v-for="item in resourceList" :key="item.id">
    <input :id="roomData.id" type="checkbox" @click="saveCheckbox(item)">
    <label :for="roomData.id">{{ item.question }}</label>

        //calendar
        <span v-if="active">
            <datepicker v-model="date"></datepicker>
        </span>
        <span v-else id="disableCalendar">Not show calendar</span>
</div>

和 saveCheckbox 方法

saveCheckbox(item){            
   item.active = !item.active
}

Vue v-for 点击不正确显示元素

Vue v-for click not show correcly element

render

vue.js

v-for