Vue中v-for循环内点击复选框无法单独显示对应日历的问题

嘿，这个问题我太熟悉了！你现在遇到的情况是因为active是一个全局的响应式变量，所有通过v-for渲染出来的元素都共享同一个状态，所以只要你点击任意一个复选框，所有元素的日历都会跟着切换显示。要实现仅点击的元素内显示日历，核心思路是给每个循环项单独维护一个激活状态，具体步骤如下：

1. 给每个列表项添加独立的激活状态 #

如果你的后端返回的resourceList里没有自带激活状态字段，那么在获取到数据后，给每个项手动添加active属性：

// 假设你是通过接口获取resourceList的，在拿到数据后做如下处理
async getResourceList() {
  const res = await this.$api.getResource(); // 替换成你的实际接口调用
  this.resourceList = res.data.map(item => ({
    ...item,
    active: false, // 初始化每个项的激活状态为false
    date: null // 如果需要绑定日历的日期，也可以在这里初始化
  }));
}

2. 修改模板绑定，关联单个项的状态 #

把模板里的全局active替换成当前项的item.active，同时修正复选框和标签的id/for绑定（你之前用了roomData.id应该是笔误，改成item.id才能确保每个复选框和标签一一对应）：

<div v-for="item in resourceList" :key="item.id">
  <input :id="item.id" type="checkbox" @click="saveCheckbox(item)">
  <label :for="item.id">{{ item.question }}</label>
  <!-- 日历区域：仅当前项active为true时显示 -->
  <span v-if="item.active">
    <datepicker v-model="item.date"></datepicker>
  </span>
  <span v-else>Not show calendar</span>
</div>

3. 更新点击事件方法，修改单个项的状态 #

现在saveCheckbox方法接收当前点击的item，直接切换它的active状态即可：

methods: {
  saveCheckbox(item) {
    // 切换当前项的激活状态
    item.active = !item.active;
    
    // 如果你需要额外处理选中/取消选中的逻辑，比如收集选中项，可以在这里操作
    // 示例：收集所有选中的项
    // this.selectedItems = this.resourceList.filter(item => item.active);
  }
}

备选方案：单独维护激活状态集合 #

如果你不想修改原有的resourceList数据，可以在data里单独定义一个对象来记录每个项的激活状态：

data() {
  return {
    resourceList: [],
    activeMap: {} // 用对象存储每个id对应的激活状态
  }
}

模板修改为：

<span v-if="activeMap[item.id]">
  <datepicker v-model="item.date"></datepicker>
</span>

点击事件修改为：

saveCheckbox(item) {
  this.$set(this.activeMap, item.id, !this.activeMap[item.id]);
  // 注意：如果直接修改对象属性，Vue可能无法检测到响应式变化，所以用$set或者提前初始化所有id的状态
}

这样就能完美实现点击哪个复选框，就只在哪个元素里显示日历啦！

内容的提问来源于stack exchange，提问作者major697