How to get array value from checkbox in vue js

Question

I just made a form to choose every needed check boxes. The checkbox value is gotten from api that I created. But when I try to choose it more than one, it just show the value that just chosen. How can I show every checkbox value that I've checked?

Here is my form. In my case, i used vuetify:

<v-list-tile v-for="check in checks" :key="check.menu_id">
 <v-list-tile-content>
  <v-checkbox
   :key="check.menu_id"
   v-model="form.data.menu_id"
   :value="check.menu_id"
   :label="check.name"
  >
  </v-checkbox>
 </v-list-tile-content>
</v-list-tile>

And here is the script:

data: function () {
  return {
    checks: [],
    form: {
      data: [{
        menu_id: '',
      },
      ],
    }
  }
},
async created () {
  const response = await api.checkMenuField()
  if (response) {
    this.checks = response.data.data
  }
},

What I knew is code like this, I just learned in a few days ago. Hope you guys can help me to solve the problem.

Thank you

Check docs v-checkbox has multiple prop;)

Estradiaz
– Estradiaz

2020-09-19 14:20:16 +00:00
Commented Sep 19, 2020 at 14:20 — Estradiaz
– Estradiaz, Commented Sep 19, 2020 at 14:20

René Hellenes · Accepted Answer · 2021-04-12 08:53:57Z

1

As @Estradiaz commented Vuetify has a multiple option. You can see it here as well with the rest of the options: https://vuetifyjs.com/en/api/v-checkbox/#props-multiple

answered Apr 12, 2021 at 8:53

René Hellenes

212 bronze badges

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

Comments

Akrd Kmnc · Accepted Answer · 2021-04-12 09:13:14Z

If you use v-model inside v-for you have to send index to each loop to send bind different data to store to your v-model

in template

<v-list-tile v-for="(check,index) in checks" :key="check.menu_id">
 <v-list-tile-content>
  <v-checkbox
   :key="check.menu_id"
   v-model="isChecked[index]"
   :label="check.name"
  >
  </v-checkbox>
 </v-list-tile-content>
</v-list-tile>

in script tag

data: function () {
  return {
    isChecked: [],
    checks: [],
    form: {
      data: [{
        menu_id: '',
      },
      ],
    }
  }
},

isChecked will store Boolean (true,false), so if you want to check that all checkbox is checked, just check all array that is true

methods: {
  isAllChecked(){
    return this.isChecked.every(val => val);
  }
}

Collectives™ on Stack Overflow

How to get array value from checkbox in vue js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related