Vue - input with multiple checkboxes

Question

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

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

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

My template:

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

Model Data (item.category):

Categories:

[
  {
    "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
]

Screenshot (Ive added item.category and category.id as label text to make it more clear):

tony19 · Accepted Answer · 2022-07-15 20:07:32Z

17

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

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]
      }
    };
  }
})

edited Jul 15, 2022 at 20:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 24, 2017 at 7:20

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue - input with multiple checkboxes

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related