Vue -Store Comma Separated Dynamic Checkbox ids in String

Question

I am having a custom checkbox in vue which dynamically gets generated using a v-for loop.I need to get the ids of every checked checkbox and store it in the form of string with comma separated. For EG: "Male , Female, Other" - these are the checked values.

But as i am generating checkboxes using a v-for the checked values are getting overridden. Below is the fucntion that gets called on checkbox click.

updateCheckAll(e) {
 let checkboxes = [];
 if(e.target.checked) {
   checkboxes.push(e.target.id);
 }
  checkboxes.join(',');

}

HTML - These are custom checkboxes.

<formfield v-for="(option,index) in getCheckBoxData" :key="index" :label="option.value"> <checkbox :id="option.key" :value="option.value" @change="updateCheckAll($event)"></checkbox> </formfield>

Adam Orłowski · Accepted Answer · 2020-06-18 06:08:44Z

2

You need to keep state of checked checkboxes:

data() {
  return {
    checked: [],
  }
},

//template
<checkbox :id="option.key" :value="option.value" v-model="checked">

That is all you need to do 😉

answered Jun 18, 2020 at 6:08

Adam Orłowski

4,53226 silver badges35 bronze badges

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

1 Comment

Shweta Over a year ago

but the thing is custom components does not support v-model thus v-model value is never stored in checked.

tony19 · Accepted Answer · 2022-07-15 00:46:25Z

2

You can check the vue documentation for more details https://v2.vuejs.org/v2/guide/forms.html

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

   new Vue({
      el: '...',
      data: {
        checkedNames: []
      }
    })

Code pen https://codepen.io/tonytomk/pen/NWxbeOB

edited Jul 15, 2022 at 0:46

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 18, 2020 at 6:46

Tony Tom

1,5831 gold badge12 silver badges19 bronze badges

2 Comments

Shweta Over a year ago

Custom Components does not support v-model in vue. So , i am trying to capture value using a event, which get overridden everytime checkbox is clicked as the checkboxes are generated dynamically.

Tony Tom Over a year ago

digitalocean.com/community/tutorials/…

Collectives™ on Stack Overflow

Vue -Store Comma Separated Dynamic Checkbox ids in String

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related