Что взять с собой

Пора за проект! В этом мини-проекте вы примените первые четыре урока: рефы, события, условия, списки и классы. Как и в мини-проектах курса JavaScript, задание говорит, что должна делать страница, а как это написать — решать вам. Каждое упражнение продолжает предыдущее.

Проект. Вы едете на выходные в горы и составляете список вещей в дорогу. За три упражнения вы покажете, что нужно взять, и научитесь класть вещи в рюкзак щелчком, потом посчитаете, что уже лежит в рюкзаке, и наконец скроете собранное и удалите то, что не понадобится.

Данные. В App.vue реф items хранит массив с объектом для каждой вещи: её id, name и packed — лежит ли она уже в рюкзаке:

{ id: 1, name: "Палатка", packed: false }

В шаблоне есть заголовок и пустой список (ul), а в style.css — класс packed, который зачёркивает вещь.

Задача. Покажите в списке каждую вещь из items в виде li с названием вещи и дайте каждому li ключ. У каждой вещи есть и кнопка: Положить, пока вещь не собрана, и Достать, когда она уже собрана. Нажатие кладёт вещь в рюкзак или достаёт обратно, а у li собранной вещи есть класс packed.

Подсказка: обработчик может получить вещь в аргументе и изменить её: item.packed = !item.packed. Вещь — один из объектов массива в рефе, поэтому Vue видит изменение и обновляет страницу.