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.

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.

• javascript
• html
• vue.js
• vuejs2
• v-model

1 Answer 1

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:[]
   ....
   }
 }