@Cimante

Как отрисовать вложенное выпадающее меню на основе ответа сервера?

Доброго времени суток!
Делаю интернет-магазин на nuxt.js и столкнулся с проблемой.

Заранее признаю свою глупость и неопытность.

Мне нужно вложенное выпадающее меню с категориями товаров. Меню двухуровневое, иерархию можно получить из коллекции в MongoDB. Для запросов используется axios.
spoiler
Если брать за основу коллекцию с товарами, то ответ от БД свыше 50 Мб, что непозволительно.

Из ответа от сервера получаю объект: { "Название категории": { open: false } } и пытаюсь его запихнуть в data().
У элементов списка категорий есть события @mouseenter и @mouseleave которые вызывают функцию toggle.
toggle()
this.dropDowns["Название категории"].open = !this.dropDowns["Название категории"].open

Отображение списка подкатегорий цепляю на v-bind:class
Проблема в том, что vue, проверяя v-bind:class, смотрит в соответствующий объект в data(), который на старте пустой, резонно выдавая cannot read property "open" of undefined

Не понимаю как это наладить. Перспектива прописывать руками все категории и подкатегории мне не нравится. Приветствуется любая помощь, в том числе другая логика работы меню, неизменным остаётся обработка ответа с бд.
  • Вопрос задан
  • 123 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Kostik_1993
Fullstack Web Developer | PHP | Laravel | Vue.js
v-if никто не отменял
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы