Vue-输入带有多个复选框 [英] Vue - input with multiple checkboxes

问题描述

我正在基于数组渲染一些复选框，并将data属性用作v模型.我正在使用Vue2.

I'm rendering some checkboxes based on an array and using a data attribute as the v-model. I'm using Vue2.

但是，由于某种原因，当v模型的值等于1时，我最终将所有复选框都选中了(我想它会将其视为布尔值而不是数字).

However, I end up having all checkboxes checked for some reason, when the value of the v-model equals 1 (I guess it treats it as a bool instead of a number).

我尝试了 v-model.number -没有任何运气.我在做什么错了?

I tried v-model.number - without any luck. What am I doing wrong?

我的模板:

<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>

模型数据(项目类别):

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添加为标签文本，以使其更加清晰):

推荐答案

使用多个复选框，您必须在v模型中提供一个数组，因此您的 item.category 必须是一个数组: [1] .

As you are using Multiple checkboxes, you have to give an array in v-model, so your item.category has to be an array: [1].

查看有效的小提琴: https://jsfiddle.net/mimani/y36f3cbm/

See the working fiddle: 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]
      }
    };
  }
})

这篇关于Vue-输入带有多个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！