Скрываем и удаляем

Что-то из вещей вам в итоге не понадобится: вы забронировали домик, поэтому палатка может остаться дома. А когда большая часть вещей собрана, хочется видеть только то, что осталось.

Удаление. Дайте каждой вещи вторую кнопку, Удалить, которая убирает вещь из списка. Счётчик тоже меняется: если ничего не собрано, после удаления палатки он показывает Собрано: 0 из 6.

Скрытие. Над списком добавьте кнопку Скрыть собранное. Нажатие на неё скрывает собранные вещи, а надпись на кнопке меняется на Показать собранное. Нажатие на неё показывает их снова. Скрытые вещи остаются в списке, их просто не видно, поэтому счётчик по-прежнему их считает. А вещь, которую вы кладёте в рюкзак, пока собранные скрыты, исчезает сразу.

Подсказка: храните в рефе, скрыты ли собранные вещи. И помните, что v-if и v-for никогда не ставят на один элемент: пусть v-for перебирает массив, который возвращает функция, — все вещи или только ещё не собранные.

Вот и весь проект. Ваш список вещей собран из данных: массива items и рефа, который говорит, скрыты ли собранные вещи. Каждое нажатие меняет данные, а Vue обновляет всё, что из них сделано: список, кнопки, зачёркнутые вещи, счётчик и сообщение. Вы ни разу не меняли страницу сами, как делали это с textContent в курсе JavaScript. В следующем уроке, «Формы», вы дадите пользователю вводить текст: имена, заметки и выбор попадают прямо в рефы с помощью v-model, а форма добавляет новые заказы в список.