0

I'm trying to create sidebar menu with dynamic data where menu contains 1 or 2 submenus.

menuList: [
        {
            "permission_id": 1,
            "menu_hierarchy": "01",
            "menu_name": "DashBoard",
            "menu_code": "M001",
            "menu_link": "/",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        },
        {
            "permission_id": 2,
            "menu_hierarchy": "02",
            "menu_name": "Search",
            "menu_code": "M002",
            "menu_link": "/",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        },
        {
            "permission_id": 2,
            "menu_hierarchy": "0202",
            "menu_name": "Synonyms",
            "menu_code": "M002.S002",
            "menu_link": "/synonyms",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        },
        {
            "permission_id": 5,
            "menu_hierarchy": "04",
            "menu_name": "RolesPermissions",
            "menu_code": "M004",
            "menu_link": "/",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        },
        {
            "permission_id": 8,
            "menu_hierarchy": "0401",
            "menu_name": "Users",
            "menu_code": "M004.S001",
            "menu_link": "/userslist",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        },
        {
            "permission_id": 12,
            "menu_hierarchy": "0402",
            "menu_name": "Roles",
            "menu_code": "M004.S002.U001",
            "menu_link": "/roles",
            "menu_order": 1,
            "is_enabled": 1,
            "application_type": 1
        }
      ]

in the above object M002 means mainmenu M002.S002 means sub menu, I'm able create main menu, but struck in creating sub menu.

<ul class="metismenu list-unstyled" id="side-menu">
          <li v-for="menu in menuList" :key="menu">
            <router-link tag="a" :to="menu.menu_link" class="side-nav-link">
              <i class="ti-home"></i>
              <span class="badge badge-pill badge-primary float-right">2</span>
              <span>{{menu.menu_name}}</span>
            </router-link>
          </li>
</ul>

If menu_code has single "." means I want to include it in the sub menu level 1, if menu_code has two "."means I want to include it in the sub menu level 2.

"menu_code": "M002.S002",

Example:

- RolesPermissions
     - users
         - roles

any help would be appreciated.

Improve this question
2
  • 2
    Check this out and change your data structure in that manner stackoverflow.com/questions/49320415/… Commented Jan 21, 2021 at 14:18
  • 1
    As @Amaarrockz implies, your structure isn't conducive to creating submenus; you'd be better off transforming the structure of the data before creating the menus (ie. by using a computed property). Commented Jan 22, 2021 at 17:51
Related questions
0
How to use JSON/Object data to make a dynamic Menu/SideNav in Vue JS
11
How to implement sub menu of the current route's children with vue.js and vue router
1
fixed sidebar with dynamic content in vue js
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.