Задание 5: Реализовать удаление займов через чекбоксы — при выделении чекбокса у элемента и нажатии кнопки с крестиком (X) выделенные элементы должны удаляться из списка.

Условие

Задание 5: Реализовать удаление займов через чекбоксы — при выделении чекбокса у элемента и нажатии кнопки с крестиком (X) выделенные элементы должны удаляться из списка. Также должна быть реализована групповая операция: чекбокс "выделить все" в верхней части списка, который при выборе отмечает все чекбоксы, а при снятии — снимает выделение со всех; при удалении через кнопку X должны удаляться все выбранные (через Set с id) элементы, и Set должен очищаться после удаления.

Ответ

Храните выбранные id в Set, удаляйте займы через filter, затем очищайте Set. «Выделить все» должен обновлять набор целиком.

Минимальный вариант Vue 3 для локального списка:

<script setup>
import { ref, computed } from 'vue';
const loans = ref([{ id: 1 }, { id: 2 }]);
const selected = ref(new Set());
const allSelected = computed(() => loans.value.length > 0 &&
  loans.value.every(item => selected.value.has(item.id)));
function toggle(id, checked) {
  checked ? selected.value.add(id) : selected.value.delete(id);
}
function selectAll(checked) {
  selected.value = new Set(checked ? loans.value.map(x => x.id) : []);
}
function removeSelected() {
  loans.value = loans.value.filter(x => !selected.value.has(x.id));
  selected.value = new Set();
}
</script>
<template>
  <label><input type="checkbox" :checked="allSelected"
    @change="selectAll($event.target.checked)">Выделить все</label>
  <label v-for="loan in loans" :key="loan.id">
    <input type="checkbox" :checked="selected.has(loan.id)"
      @change="toggle(loan.id, $event.target.checked)">Заём {{ loan.id }}
  </label>
  <button :disabled="!selected.size" @click="removeSelected"
    aria-label="Удалить выбранные займы">X</button>
</template>

При серверном удалении состояние подтверждают после успешного ответа либо предусматривают rollback оптимистичного обновления.