CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-material
user3380738
user3380738

Reputation: 83

All the checkboxes appear checked. VueJs VueMaterial

I'm trying to check just one checkbox, but when I check it the rest become checked as well. Why does this happen? Any kind of documentation on this?

<md-layout v-for="Location in Locations" :key="Location.id">
  <md-checkbox v-model="checkbox" class="md-warn">{{ Location.city }}</md-checkbox>
</md-layout>

data () {
  return {
    checkbox: false,
    Locations: [{
      id: 1,
      city: '1'
    }, {
      id: 2,
      city: '2'
    }, {
      id: 3,
      city: '3'
    }, {
      id: 4,
      city: '4'
    }, {
      id: 5,
      city: '5'
    }, {
      id: 6,
      city: '6'
    }]

Upvotes: 0

Views: 1380

Answers (1)

thanksd
thanksd

Reputation: 55644

Since the v-model for each checkbox is the variable checkbox, the value for that variable is being bound to each of the components. You want the v-model of each checkbox component to have its own variable to reference.

You could turn your checkbox Boolean into a checkboxes Object, with index keys for each location ID:

data() {
  return {
    checkboxes: {
      1: false,
      2: false,
      3: false,
      4: false,
      5: false,
      6: false,
    },
    ...

Then in your template, reference each checkboxes property value by the Location.id:

<md-checkbox v-model="checkboxes[Location.id]" class="md-warn">

Or, if you don't mind affecting the Locations data property, you could simply bind to a selected property of each location:

<md-checkbox v-model="Location.selected" class="md-warn">

Upvotes: 2

Related Questions