Удаление и фильтр

Привычки меняются: ту, которую вы бросили, пора убрать, а в напряжённый день хочется видеть только то, что ещё осталось сделать. В этом упражнении у каждой привычки появляется кнопка Удалить, а у списка — фильтр.

Удаление. Кнопка лежит в HabitItem, а привычки — в App.vue, так что всё как с флажком: компонент отправляет событие, на этот раз remove, а родитель делает работу. Компонент может отправлять несколько событий, и defineEmits перечисляет их все:

const emit = defineEmits(["toggle", "remove"]);

<button @click="emit('remove', habit.id)">Удалить</button>

Кнопка стоит после label, а не внутри него, потому что этот элемент принадлежит флажку. В App.vue функция remove(id) с помощью filter() оставляет все привычки, кроме этой. Получается новый массив, который попадает в habits.value, как в уроке «Состояние и события»:

function remove(id) {
    habits.value = habits.value.filter((habit) => habit.id !== id);
}

Фильтр. Над списком выпадающий список (select) выбирает, что показывать: все привычки, только те, что ещё осталось сделать, или только выполненные. v-model кладёт его значение в реф filter, а список показывает вычисляемое значение, составленное из habits и filter. (Реф filter и метод массива filter() совпадают только названием.)

<label class="filter">
    Показывать
    <select v-model="filter">
        <option value="all">Все</option>
        <option value="todo">Осталось</option>
        <option value="done">Сделано</option>
    </select>
</label>

const filter = ref("all");

const shownHabits = computed(() => {
    if (filter.value === "todo") {
        return habits.value.filter((habit) => !habit.done);
    }
    if (filter.value === "done") {
        return habits.value.filter((habit) => habit.done);
    }
    return habits.value;
});

Прогресс по-прежнему считает все привычки, из habits. Только v-for проходит по shownHabits. Если выбран фильтр «Осталось», отмеченная привычка сразу пропадает из списка, потому что её больше нет в shownHabits.