Задание: добавление переменных в компонент в проекте OnlinePizza

В этом задании вы подключите моковые данные, создадите реактивные переменные и реализуете отрисовку списков с помощью v-for. Используйте знания о Composition API и директивах, полученные в предыдущих уроках.

Шаг 1. Создайте файлы с моковыми данными

В директории src/mocks/ создайте четыре JSON-файла с данными, повторяющими структуру из db.json:

src/mocks/dough.json — массив объектов с полями id, name, description, price. Два варианта: "Тонкое" (цена 0) и "Толстое" (цена 50).

src/mocks/sizes.json — массив объектов с полями id, name, multiplier. Три варианта: "23 см" (множитель 1), "32 см" (множитель 1.5), "45 см" (множитель 2).

src/mocks/sauces.json — массив объектов с полями id, name, price. Три варианта: "Томатный" (цена 0), "Сливочный" (цена 30), "Острый" (цена 20).

src/mocks/ingredients.json — массив объектов с полями id, name, price, category. 15 ингредиентов из трёх категорий: cheese (сыры), meat (мясо), vegetable (овощи). Возьмите данные из db.json вашего бэкенда.

Шаг 2. Импортируйте данные в HomeView

Откройте src/views/HomeView.vue и в блоке <script setup> импортируйте все четыре JSON-файла из src/mocks/.

Шаг 3. Создайте реактивные переменные

С помощью ref создайте следующие реактивные переменные:

• selectedDough — выбранный тип теста (по умолчанию первый элемент из массива теста, т.е. элемент с id: 1)
• selectedSize — выбранный размер (по умолчанию первый элемент)
• selectedSauce — выбранный соус (по умолчанию первый элемент)
• ingredientQuantities — объект, хранящий количество каждого ингредиента в формате { [ingredientId]: quantity } (по умолчанию все значения равны 0)

Шаг 4. Отрисуйте список типов теста

В шаблоне создайте секцию "Тесто". С помощью директивы v-for пройдите по массиву теста и для каждого элемента отрисуйте кнопку или блок с названием.

Реализуйте выбор: при клике на элемент (@click) обновляйте значение selectedDough.

Используйте динамическую привязку класса (:class), чтобы визуально выделять текущий выбранный тип теста — например, добавляйте класс active к выбранному элементу.

Не забудьте указать :key для директивы v-for — используйте id элемента.

Шаг 5. Отрисуйте список размеров

Аналогично создайте секцию "Размер". Пройдите по массиву размеров с v-for, отрисуйте элементы выбора. При клике обновляйте selectedSize, выбранный размер выделяйте с помощью динамического класса.

Шаг 6. Отрисуйте список соусов

Создайте секцию "Соус" по тому же принципу: v-for по массиву соусов, выбор по клику, динамическое выделение выбранного.

Шаг 7. Отрисуйте список ингредиентов

Создайте секцию "Ингредиенты". Для каждого ингредиента отобразите:

• Название ингредиента
• Цену

Пока не добавляйте механизм изменения количества — просто отрисуйте все ингредиенты в виде списка или сетки карточек. Управление количеством мы добавим, когда создадим компонент AppCounter.

Проверка

Запустите проект и убедитесь, что:

• Все четыре списка (тесто, размер, соус, ингредиенты) корректно отрисовываются на странице
• При клике на тип теста, размер или соус — выбранный элемент визуально выделяется
• Нет ошибок в консоли браузера
• При смене выбора предыдущий элемент теряет выделение, а новый приобретает