[Vuejs]-All the checkboxes appear checked. VueJs VueMaterial

by

2👍

✅

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">
👤thanksd

Leave a comment