Nuxt v2.15中如何将checkbox选中值存入form.categories数组

该问题核心原因是form.categories的初始值类型不符合Vue多选框绑定要求，和Nuxt版本没有直接关联：当绑定的v-model值初始不是数组类型时，Vue会将多选框识别为单个开关，只会切换true/false状态，不会收集选中值到数组。

第一步：正确初始化响应式数据 #

在页面的data配置中，将form.categories初始化为空数组：

export default {
  data() {
    return {
      form: {
        // 必须显式初始化为空数组，不可省略、不可设置为布尔/字符串类型
        categories: []
      },
      // 你的分类源数据
      categories: []
    }
  }
}

特殊场景处理：动态新增form字段 #

如果form对象是页面运行过程中动态生成的，不是初始化时就声明在data里的，需要用Vue提供的$set方法添加响应式属性，避免响应式丢失：

// 动态给form添加categories属性，初始值为空数组
this.$set(this.form, 'categories', [])

模板代码无需修改 #

你现有模板中的多选框绑定逻辑是正确的，完成上述初始化配置后，勾选多选框时form.categories会自动存入选中项的category.id，取消勾选时自动移除对应值。

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