0👍
you have to try nested loop for it.
<div class="nav-link dropdown-toggle" v-for="(menu, menuIndex) in menus" :key="menuIndex" role="button"
:id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ menu.name }}
<div v-if="menu.sub_menus">
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink" v-for="(item, index) in menu.sub_menus"
:key="index">
<a class="dropdown-item" href="#">{{ item.name }}</a>
</div>
</div>
</div>
0👍
I see you are using id="dropdownMenuLink" for parent div and aria-labelledby="dropdownMenuLink" for child div, please make sure them are dynamic with index
- [Vuejs]-How dynamic update v-combobox items list?
- [Vuejs]-How can I initialize an input field with the value of a URL query parameter?
0👍
<div v-for="(menu, menuIndex) in menus" :key="menuIndex" >
<div class="nav-link dropdown-toggle"role="button" :id="menuIndex" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ menu.name }}
<div v-if="menu.sub_menus.length">
<div class="dropdown-menu" :aria-labelledby="menuIndex" >
<a v-for="(item, index) in menu.sub_menus" :key="index" class="dropdown-item" href="#">{{ item.name }}</a>
</div>
</div>
</div>
</div>
Hope it can help you
Source:stackexchange.com