Vue2+Vuetify2中v-for循环v-checkbox的异常问题

问题原因 #

你遇到的问题核心在于对象引用的严格相等判断：Vuetify的v-checkbox结合v-model数组使用时，是通过严格相等（===）匹配:value绑定的对象和数组内的元素。每次API请求返回的新数据都是全新的对象实例——哪怕属性和之前完全一致，它们的内存引用地址也不一样。

另外，如果你用v-show控制对话框显示，对话框组件实例会被Vue缓存，之前复选框的选中状态没有被彻底重置，这就导致第二次打开时出现“明明selected是空数组，但复选框全选中”的异常；而取消任意项时，Vuetify因引用不匹配错误同步了所有复选框的状态，之后手动操作才恢复正常。

解决方案 #

1. 给v-for设置唯一key（必做） #

确保每个复选框组件实例能被正确识别和更新，用item的唯一标识（比如id）作为key：

<v-checkbox
  v-for="item in dataList"
  :key="item.id"
  v-model="selected"
  :value="item"
  :label="item.name"
></v-checkbox>

2. 用v-if控制对话框渲染（彻底重置状态） #

把对话框的显示控制从v-show改成v-if，这样关闭对话框时组件会被销毁，打开时重新创建，彻底清空之前的选中状态：

<v-dialog v-if="dialogVisible" max-width="500px">
  <!-- 对话框内容，包括v-for的复选框 -->
</v-dialog>

关闭对话框的逻辑：

closeDialog() {
  this.dialogVisible = false;
  this.selected = [];
}

3. 手动维护选中状态（备选方案） #

如果前两种方法不能解决问题，可以绕过对象引用判断，通过item的唯一标识手动处理选中状态：

<v-checkbox
  v-for="item in dataList"
  :key="item.id"
  :input-value="isItemSelected(item)"
  :value="item"
  :label="item.name"
  @change="handleItemSelect(item, $event)"
></v-checkbox>

对应的脚本逻辑：

methods: {
  isItemSelected(item) {
    // 通过id判断是否已选中
    return this.selected.some(selectedItem => selectedItem.id === item.id);
  },
  handleItemSelect(item, isChecked) {
    if (isChecked) {
      // 避免重复添加
      if (!this.isItemSelected(item)) {
        this.selected.push(item);
      }
    } else {
      // 过滤掉取消选中的项
      this.selected = this.selected.filter(selectedItem => selectedItem.id !== item.id);
    }
  }
}

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