samedi 8 juin 2019

Multiple checkboxes within for loops

I am trying to get the value of checkboxes generated in a for loop.

<div v-for="(option, index) in options" :key="index">
    <div v-for="(left_option, index_left)" in option.left_elements" :key="index_left">
      <div>
        <input class="custom-control-input" id="customCheck1" type="checkbox" value="textA" v-model="checkedTest[option.id+'_'+left_option.id]" checked>
        <input class="custom-control-input" id="customCheck2" type="checkbox" value="textB" v-model="checkedTest[option.id+'_'+left_option.id]">
        <input class="custom-control-input" id="customCheck3" type="checkbox" value="textC" v-model="checkedTest[option.id+'_'+left_option.id]">
      ...

I pass the option.id and left_option.id in order to make the model "unique" and avoid same names for each loop. I used this way for input texts and it works fine. But I am not sure how to implement it with checkboxes.

In JS I have this:

export default {
  data() {
    return {
      checkedTest: []

With the code I have, I get just a value of "true" or "false". I am not able to retrieve the checkbox selected values (textA, textB, textC).

How can I have dynamic names in v-model for checkboxes and at the same time select multiple checkboxes and get their values in an array in the "checkedTest"?

eg.

checkedTest: {"1_1":"selected values", "1_2":"selected values"}

where 1_1 is the option.id and left_option.id and selected values are the checked checkboxes (textA, textB, textC)

checkedTest: {"1_1":"textA,textB", "1_2":"textA,textC"}

Any recommendations or any comments would be helpful. Thank you




Aucun commentaire:

Enregistrer un commentaire