Для создания кнопки "Выбрать все" в Vue.js для компонента checkbox можно использовать следующий подход:
1. Создайте переменную в вашем компоненте, которая будет хранить состояние выбора всех checkbox-ов. Назовем ее, например, isAllSelected и устанавливаем ее изначально в false.
2. В разметке добавьте checkbox с моделью данных, как это обычно делается в Vue.js:
<input type="checkbox" v-model="isAllSelected" @change="selectAll">
3. Добавьте обработчик события change, который будет вызван при изменении состояния checkbox-а. В этом обработчике вы должны задать состояние всех checkbox-ов в зависимости от значения isAllSelected:
methods: {
selectAll() {
// Проходим по каждому checkbox-у и устанавливаем его состояние в значение isAllSelected
// Если isAllSelected === true, то все checkbox-ы будут отмечены, иначе будут сняты
this.checkboxList.forEach((checkbox) => {
checkbox.isSelected = this.isAllSelected;
});
},
},
4. При выборе нового checkbox-а также обновляется состояние isAllSelected. Для этого добавьте watcher на свойство isSelected каждого checkbox-а:
watch: {
checkboxList: {
deep: true,
handler() {
const allSelected = this.checkboxList.every((checkbox) => checkbox.isSelected);
const allUnselected = this.checkboxList.every((checkbox) => !checkbox.isSelected);
this.isAllSelected = allSelected;
// Обрабатываем ситуацию, когда все checkbox-ы сняты
if (allUnselected) {
this.isAllSelected = false;
}
},
},
},
В этом коде checkboxList представляет массив, содержащий все checkbox-ы в вашем компоненте.
Теперь, при выборе или снятии отметки с одного из checkbox-ов, состояние isAllSelected будет автоматически обновлено. При щелчке на кнопку "Выбрать все" изменится состояние всех checkbox-ов.