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