How to render nested dropdown menu based on server response?

Question

MongoDB

Good day!
I'm making an online store on nuxt.js and ran into a problem.

In advance, I admit my stupidity and inexperience.

I need a nested drop down menu with product categories. The menu is two-level, the hierarchy can be obtained from the collection in MongoDB. For requests, axios is used.

spoiler

If we take as a basis a collection with goods, then the response from the database is over 50 MB, which is not permissible.

From the response from the server I get the object: { "Название категории": { open: false } }and try to push it into data().
Category list items have events @mouseenterthat @mouseleavecall the toggle function.

toggle()

this.dropDowns["Название категории"].open = !this.dropDowns["Название категории"].open

Displaying a list of subcategories cling to v-bind:class
The problem is that vue, when checking v-bind:class, looks at the corresponding object in data(), which is empty at the start, reasonably giving out cannot read property "open" of undefined

I don’t understand how to fix this. I do not like the prospect of prescribing all categories and subcategories by hand. Any help is welcome, including other logic of the menu, processing of the response from the database remains unchanged.

Answer 1

v-if nobody canceled