Vue.js中如何获取复选框的数组值？（Vuetify场景）

刚接触Vue.js遇到这种问题很正常，我来帮你梳理一下问题所在并给出解决方案：

问题根源 #

你当前把v-checkbox的v-model绑定到了单个值（form.data.menu_id），而复选框多选场景下，需要用数组来存储所有选中的值——单个值会被每次新选中的选项覆盖，所以你只能看到最后选中的那个ID。

修复步骤 #

1. 调整数据结构：把用于存储选中值的变量改成空数组，而不是单个字符串或对象数组里的单个字段。
2. 修改模板绑定：将v-checkbox的v-model指向这个新的数组。

修改后的完整代码 #

模板部分：

<v-list-tile v-for="check in checks" :key="check.menu_id">
  <v-list-tile-content>
    <v-checkbox 
      :key="check.menu_id" 
      v-model="form.selectedMenuIds" 
      :value="check.menu_id" 
      :label="check.name">
    </v-checkbox>
  </v-list-tile-content>
</v-list-tile>

脚本部分：

data: function () {
  return {
    checks: [],
    form: {
      selectedMenuIds: []  // 用数组存储所有选中的menu_id
    }
  }
},
async created () {
  const response = await api.checkMenuField()
  if (response) {
    this.checks = response.data.data
  }
}

原理说明 #

Vuetify的v-checkbox组件在多选模式下（不需要额外配置，只要v-model绑定数组即可），会自动处理选中/取消选中的逻辑：

• 选中复选框时，会将对应的:value值添加到数组中
• 取消选中时，会从数组中移除对应的value值

之后你需要提交选中的ID时，直接使用this.form.selectedMenuIds就能拿到所有选中的菜单ID数组了。

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