Vue中取消勾选复选框未从数组移除数据？

你的问题出在函数逻辑没有区分复选框的选中状态，不管勾选还是取消都执行了push操作，导致取消时也会添加重复对象。下面是具体的修改思路和代码示例：

核心逻辑调整 #

需要先通过对象的**唯一标识（比如id）**判断该对象是否已存在于selected数组中：

• 勾选时：如果对象不在数组里，再添加进去
• 取消勾选时：如果对象已在数组里，就移除它

修改后的代码示例 #

假设你的原函数是绑定在复选框的@change事件上，修改后的代码如下：

<template>
  <!-- 注意要把事件对象event传进去 -->
  <input 
    type="checkbox" 
    @change="handleAudienceSelect(networkAudience, $event)"
  >
</template>

<script>
export default {
  data() {
    return {
      selected: [],
      // 示例受众对象，假设包含唯一id属性
      networkAudience: { id: 1, name: "测试受众组" }
    };
  },
  methods: {
    handleAudienceSelect(item, event) {
      // 获取复选框的选中状态
      const isChecked = event.target.checked;
      // 通过id查找对象在数组中的索引
      const targetIndex = this.selected.findIndex(
        (itemInArr) => itemInArr.id === item.id
      );

      if (isChecked) {
        // 勾选时，只有对象不在数组里才添加
        if (targetIndex === -1) {
          this.selected.push(item);
        }
      } else {
        // 取消勾选时，找到对象就移除
        if (targetIndex !== -1) {
          this.selected.splice(targetIndex, 1);
        }
      }
    }
  }
};
</script>

另一种简化写法（不依赖事件对象） #

如果你的复选框用v-model绑定了选中状态，也可以直接根据数组中是否存在对象来切换：

handleAudienceSelect(item) {
  const targetIndex = this.selected.findIndex(
    (itemInArr) => itemInArr.id === item.id
  );

  if (targetIndex === -1) {
    this.selected.push(item);
  } else {
    this.selected.splice(targetIndex, 1);
  }
}

关键注意点 #

• 不要用includes(item)判断对象是否存在：因为对象是引用类型，即使内容相同，引用地址不同也会判断为不存在，必须用**唯一属性（如id）**来匹配。
• 加判断逻辑避免重复添加：即使勾选操作，也要先确认对象不在数组里再执行push，防止误操作导致重复。

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