Добавление трат

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

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

Приложение. Форма в App.vue уже готова: текстовое поле #what, числовое поле #amount, выпадающий список #category со значениями food, transport и fun и кнопка «Добавить». Под формой пустой список #expenses. В скрипте есть только строка import, остальное за вами.

Задача. Когда форма отправляется, страница не должна перезагружаться. Храните траты в массиве в рефе и добавляйте каждую новую в список как элемент, который показывает, на что она была, сумму и категорию, например Обед: €12 (food). Затем очистите текстовое и числовое поля; категория может остаться прежней. Но сначала проверьте поля:

• Если поле #what пустое (пробелы в начале и конце не считаются), покажите Укажите, на что вы потратили.
• Если сумма пустая, равна 0 или меньше, покажите Введите сумму больше 0.

Покажите сообщение в абзаце с классом error. Пока что-то не так, ничего не добавляйте, а как только трата добавлена, сообщение исчезает.

Совет: каждой трате нужен id для :key. Date.now() возвращает число миллисекунд с начала 1970 года, и оно при каждом нажатии «Добавить» разное, так что это хороший id: { id: Date.now(), … }. А с v-model.number сумма — это число или "", если поле пустое.