javascript - 使用 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>

我想要的是，当我单击一个按钮时，它会获取我选择的所有复选框。并给我所有的价值观。但我不知道该怎么做，因为当我尝试将 a 添加v-model到复选框时它会中断。

标签： javascripthtmlvue.jsvuejs2v-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(){
 return{
   ...
    checkedProducts:[]
   ....
   }
 }