Vue - 带有多个复选框的输入答案

【问题标题】：Vue - input with multiple checkboxesVue - 带有多个复选框的输入
【发布时间】：2017-06-08 20:56:24
【问题描述】：

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

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

我试过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）：

类别：

[
  {
    "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 作为标签文本以使其更清晰）：

【问题讨论】：

标签： html vue.js checkbox vuejs2

【解决方案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]
      }
    };
  }
})

【讨论】：