[Vuejs]-Bootstrap dropdown submenu not showing based on parent id

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

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

Leave a comment