使用 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時它會中斷。

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