将复选框值添加到 nuxt 中的数据数组

Question

我正在使用 nuxt v2.15

这些是我的复选框：

<div v-for="category in categories" v-bind:key="category.id" class="ml-4">
  <input type="checkbox" name="categories[]" @change="search()" v-model="form.categories" :id="`category`+category.id" :value="category.id">
  <label :for="`category`+category.id">{{ category.title }}</label>
</div>

当我选中其中一个时，form.categories 变成了 true！复选框的值未添加到 form.categories 数组。

它应该将复选框 (category.id) 的值存储在 form.categories 中，但它会将 form.categories 切换到 true 和 false 状态。

如何在 form.categories 中存储复选框值？

PS：我有一个使用旧版本 Nuxt 的项目，它工作正常！但是在新项目中，这是行不通的。是因为版本更新了吗？

Answer 1

我通过编写一个函数来解决它，将 category.id 添加到 form.categories 中：

addCategory (id) {
  if(!this.form.categories.includes(id))
     this.form.categories.push(id);
  else
     this.form.categories.splice(this.form.categories.indexOf(id), 1);
  this.search()

}

我在复选框中调用它@change

将复选框值添加到 nuxt 中的数据数组

add checkboxs values to data array in nuxt

checkbox

vue.js

nuxt.js

v-model