如何将选中的复选框值存入数组？修复ReferenceError错误

一、现有问题的修复 #

1. 解决复选框默认全选的问题 #

你的:checked="selected"绑定逻辑错误：selected是数组，Vue会将其转为布尔值true，导致所有复选框默认选中。需要改为判断当前选项的id是否存在于selected数组中：

<input
  class="form-check-input"
  type="checkbox"
  autocomplete="off"
  :checked="selected.includes(networkAudience.id)"
  @change="selectedNetAudience(networkAudience.id)"
>

2. 修复「networkAudience is not defined」错误 #

原方法存在语法和逻辑问题：for循环未声明变量、缺少花括号包裹循环体，且逻辑是一次性遍历所有项而非处理单个复选框的状态。修改后的方法如下：

methods: {
  selectedNetAudience(id) {
    const index = this.selected.indexOf(id);
    if (index > -1) {
      // 已选中则从数组移除
      this.selected.splice(index, 1);
    } else {
      // 未选中则加入数组
      this.selected.push(id);
    }
  }
}

另外注意：模板中遍历的是fixedNetworkAudiences(audience)的结果，但方法里操作的是this.networkAudiences，需确保两者数据来源一致，否则会出现逻辑不匹配。

二、更优实现方案：使用Vue原生v-model双向绑定 #

Vue对复选框的数组绑定有原生支持，无需手动编写处理方法，代码更简洁可靠：

1. 修改模板代码 #

直接用v-model绑定selected数组，Vue会自动将选中项的value值推入数组，取消选中时自动移除：

<tr
  v-for="(networkAudience) in fixedNetworkAudiences(audience)"
  :key="audience.id + networkAudience.id"
>    
  <td>
    <input
      class="form-check-input"
      type="checkbox"
      autocomplete="off"
      :value="networkAudience.id"
      v-model="selected"
    >
  </td> 
</tr>

2. 简化JS代码 #

无需保留selectedNetAudience方法，data部分保持基础定义即可：

data() {
  return {
    networkAudiences: {},
    selected: []
  }
}

这种方式既解决了默认选中问题（仅id在selected数组中的复选框会被选中），又避免了手动操作数组的潜在错误，逻辑更清晰。

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