В Vue.js 3 вы можете собрать значения чекбоксов в массив, используя директиву v-model и создавая вычисляемое свойство. Для этого поместите все чекбоксы в один и тот же массив и привяжите этот массив к v-model.
Приведу пример, как это можно сделать:
<template>
<div>
<label v-for="(checkbox, index) in checkboxes" :key="index">{{ checkbox.label }}
<input type="checkbox" v-model="selectedCheckboxes" :value="checkbox.value">
</label>
<p>Выбранные чекбоксы: {{ selectedCheckboxes }}</p>
</div>
</template>
<script>
export default {
data() {
return {
checkboxes: [
{ label: 'Чекбокс 1', value: 'checkbox1' },
{ label: 'Чекбокс 2', value: 'checkbox2' },
{ label: 'Чекбокс 3', value: 'checkbox3' }
],
selectedCheckboxes: []
}
}
}
</script>
В этом примере мы создаем массив checkboxes, который содержит объекты с меткой и значением каждого чекбокса. Мы также определяем пустой массив selectedCheckboxes, который будет содержать значения выбранных чекбоксов.
Затем мы используем директиву v-for для отображения каждого чекбокса из массива checkboxes. Мы привязываем v-model к selectedCheckboxes, чтобы автоматически обновлять массив с выбранными значениями.
У каждого чекбокса мы также устанавливаем значение :value="checkbox.value", чтобы связать его значение с элементом в массиве selectedCheckboxes.
В конце мы помещаем {{ selectedCheckboxes }} для отображения выбранных значений чекбоксов.
В результате, при выборе / снятии флажка в любом из чекбоксов, массив selectedCheckboxes будет автоматически обновляться и отображать выбранные значения.