使用Vue.js获取所有选中复选框的列表

Question

如何使用Vue获取我选择的所有复选框的列表？ 这是我的HTML，它可以正常工作并显示我的产品列表和复选框。

<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>

我想要的是当我点击一个按钮时，它会获取我所选中的所有复选框，并给我所有这些值。 但是我无法弄清楚如何做到这一点，因为即使尝试向复选框添加v-model也会导致它出现故障。

- user1469734

Answer 1

只需将每个复选框的 value 与产品绑定，并将 v-model 绑定到数组 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:[]
   ....
   }
 }

- Boussadjra Brahim