Question

用于`以显示数据库中的数据：

<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

active变量对于resourceList中的每个项目都是共享的，您需要为列表中的每个项目创建活动标识符，一种实现方式是拥有resourceList的项目的active属性。假设您在resourceList的每个项目中都具有活动属性，则可以执行以下操作。

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

Answer 2

您需要存储循环中每个项目的值。使用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>

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

2 个答案: