Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
16
rated 0 times [  20] [ 4]  / answers: 1 / hits: 15873  / 6 Years ago, mon, september 3, 2018, 12:00:00

How can I get a list of all check boxes that I selected with Vue?
This is my HTML which works and shows me a list of my products with a checkbox.


<li v-for="(product, index) in products">
<input :id="product.slug" :value="product.id" name="product" type="checkbox" />
<label :for="product.slug"><span></span></label>
</li>

What I want is that when I click on a button, it fetches all check boxes that I selected. And give me all the values.
But I can't figure out how to do it, because it'll break when I even try to add a v-model to the checkbox.


More From » html

 Answers
112

Just bind every checkbox value with a product and the v-model to the array checkedProducts


<li v-for="(product, index) in products">
<input :id="product.slug" :value="product" name="product" type="checkbox" v-model="checkedProducts" />
<label :for="product.slug"><span></span></label>
</li>

...
data(){
return{
...
checkedProducts:[]
....
}
}

[#53572] Thursday, August 30, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
mckaylab

Total Points: 311
Total Questions: 120
Total Answers: 93

Location: Montenegro
Member since Thu, Jun 16, 2022
2 Years ago
;