使用Vue of list获取所有选中的复选框

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时，它就会中断。

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(){
...
checkedProducts:[]
....
}