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

如何获取使用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

时，它都会崩溃。

只需将每个复选框

值

与一个产品绑定，并将

v-model

绑定到数组

checkedProducts

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

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

...
数据（）{
返回{
...
选中产品：[]
....
}
}