Доброго времени суток!
Делаю интернет-магазин на 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
Не понимаю как это наладить. Перспектива прописывать руками все категории и подкатегории мне не нравится. Приветствуется любая помощь, в том числе другая логика работы меню, неизменным остаётся обработка ответа с бд.
