dynamic multi-level in vuejs
<div id="app"> <nav class="idb-sidebar-nav"> <ul class="idb-nav list-unstyled m-15 p-0"> <template v-for="(menu, index) in sideBarLinks.routes" :key="index"> <li class="nav-item" v-if="menu.child_routes && menu.child_routes.length"> <a :class="[ 'nav-link', { 'active': menu.active } ]" href="javascript:void(0);" @click="toggleMenu(index)"> <i :class="menu.menu_icon" class="menu-icon"></i> <span class="menu-title">{{menu.menu_title}}</span> </a> <ul class="list-unstyled sub-menu"> <router-link tag="li" v-for="(subMenu, key) in menu.child_routes" :key="key" :to="subMenu.path"> <a href="javascript:void(0);" class="sub-menu-nav-link"> <span>{{subMenu.menu_title}}</span> </a> </router-link> </ul> </li> <router-link v-else :key="index" :to="menu.path" tag="li" class="nav-item"> <a :class="[ 'nav-link', { 'active': menu.active } ]" href="javascript:void(0);" @click="toggleMenu(index)"> <i :class="menu.menu_icon" class="mr-15"></i> <span class="menu-title">{{menu.menu_title }}</span> </a> </router-link> </template> </ul> </nav> </div>
