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>

Source: stackoverflow.com

Similar codes

0 vote218 views1 answer
Custom hr in css
CSS
0 vote188 views1 answer
Como diminuir uma imagem em css
CSS
10 votes184 views2 answers
Css list items next to each other
CSS
0 vote200 views2 answers
Access is denied nul > server.js
CSS
64 votes167 views6 answers
Center image html
CSS
0 vote204 views1 answer
Also define the standard property 'border-radius' for compatibility css(vendor prefix)
CSS
1 vote189 views1 answer
Css animate border bottom left to right
CSS
20 votes208 views2 answers
No select css
CSS
8 votes196 views2 answers
Html how to change highlight color
CSS
0 vote238 views1 answer
Matplotlib doesn't plot [<matplotlib.lines.Line2D at 0x7f3543b113a0>]
CSS