Для создания мульти-чекбокса на Vue.js 3, нам понадобится использовать директиву v-model в сочетании с массивом, который будет хранить значения выбранных чекбоксов. Вот пошаговая инструкция:
Шаг 1: Создайте компонент мульти-чекбокса
В файле компонента создайте шаблон в виде списка чекбоксов, используя директиву v-for для итерации по массиву опций.
<template>
<div>
<label v-for="option in options" :key="option">
<input type="checkbox" :value="option" v-model="selectedOptions">
{{ option }}
</label>
</div>
</template>
Шаг 2: В компоненте определите свойства и массив для хранения выбранных опций
Внутри блока <script> определите свойства компонента, включая массив selectedOptions, в котором будут храниться выбранные значения чекбоксов.
<script>
export default {
data() {
return {
options: ['Option 1', 'Option 2', 'Option 3'],
selectedOptions: []
}
}
}
</script>
Шаг 3: Используйте компонент мульти-чекбокса в других компонентах
Теперь вы можете использовать ваш компонент мульти-чекбокса в других компонентах, просто добавив его в шаблон и связав его с нужным свойством.
<template>
<div>
<multi-checkbox v-model="selectedValues"></multi-checkbox>
<p>Выбранные значения: {{ selectedValues }}</p>
</div>
</template>
<script>
import MultiCheckbox from './MultiCheckbox.vue'
export default {
data() {
return {
selectedValues: []
}
},
components: {
MultiCheckbox
}
}
</script>
Теперь, когда пользователь отмечает или снимает флажки в мульти-чекбоксе, selectedValues будет автоматически обновляться с выбранными значениями.
Надеюсь, эта информация окажется полезной! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.