Vue - 여러 확인란이 있는 입력

Vue - 여러 확인란이 있는 입력

어레이를 기반으로 몇 가지 체크박스를 렌더링하고 데이터 속성을v-modelVue2를 사용하고 있습니다.

하지만, 어떤 이유로든 모든 체크박스를 켜게 되었습니다.v-model1(숫자가 아닌 부울로 취급하는 것 같습니다).

나는 노력했다.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을 라벨 텍스트로 추가했습니다):

Multiple 체크박스를 사용하고 있기 때문에 다음 위치에 어레이를 지정해야 합니다.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]
      }
    };
  }
})

언급URL : https://stackoverflow.com/questions/41821760/vue-input-with-multiple-checkboxes