Vue - 输入多个复选框

Question

我正在渲染一些基于数组的复选框，并使用数据属性作为v模型。我正在使用Vue2。

但是，当v-model的值等于1时，我最终会因为某些原因检查所有复选框（我猜它将它视为bool而不是数字）。

我试过 v-model.number - 没有任何运气。我做错了什么？

我的模板：

<div v-for="category in categories">    
    <input type="checkbox" v-model.number="item.category" :id="'category_' + category.id" :value="category.id" @change="save"/>
    <label>{{ item.category }} : {{ category.id }}</label>
</div>

模型数据（item.category）：

1

分类

[
  {
    "id": 2,
    "name": "news Category 0"
  },
  {
    "id": 7,
    "name": "news Category 1"
  },
  {
    "id": 12,
    "name": "news Category 2"
  },
  {
    "id": 17,
    "name": "news Category 3"
  },
  {
    "id": 22,
    "name": "news Category 4"
  },
  {
    "id": 27,
    "name": "news Category 5"
  },
// other values
]

屏幕截图（我已将item.category和category.id添加为标签文字以使其更清晰）：

Answer 1

当您使用Multiple checkboxes时，您必须在v-model中提供一个数组，因此item.category必须是一个数组：[1]。

查看工作小提琴：https://jsfiddle.net/mimani/y36f3cbm/

var demo = new Vue({
  el: '#demo',
  data() {
    return {
      categories: [{
        "id": 2,
        "name": "news Category 0"
      },  {
        "id": 92,
        "name": "news Category 8"
      }, {
        "id": 97,
        "name": "news Category 9"
      }],
      item: {
        category: [1]
      }
    };
  }
})