Получить все выбранные флажки с Vue списка

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