web-dev-qa-db-ja.com

Vue-複数のチェックボックスを使用した入力

配列に基づいていくつかのチェックボックスをレンダリングし、vモデルとしてデータ属性を使用しています。私はVue2を使用しています。

ただし、vモデルの値が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）：

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を追加しました）：

Vue checkbox v-model typecasting

htmlvuejs2vue.js
5
Qar

複数のチェックボックス を使用しているため、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]
      }
    };
  }
})
8
Saurabh