Question 17032 in Laravel Question posted in
The official Laravel Documentation can be found here.

Bootstrap dropdown submenu not showing based on parent id – Laravel

I have a problem with make dropdown menu and submenu with bootstrap on Vue 3 and bootstrap 5.2

There is my json menu data:

[
    {
        "id": 1,
        "name": "Menu 1",
        "active": 1,
        "created_at": "2022-11-20T03:27:47.000000Z",
        "updated_at": "2022-11-20T03:27:47.000000Z",
        "sub_menus": [
            {
                "id": 1,
                "menuId": 1,
                "name": "Sub Menu 1",
                "active": 1,
                "created_at": "2022-11-20T03:27:57.000000Z",
                "updated_at": "2022-11-20T03:27:57.000000Z"
            },
            {
                "id": 2,
                "menuId": 1,
                "name": "Sub Menu 2",
                "active": 1,
                "created_at": "2022-11-20T06:31:59.000000Z",
                "updated_at": "2022-11-20T06:31:59.000000Z"
            }
        ]
    },
    {
        "id": 2,
        "name": "Menu 2",
        "active": 1,
        "created_at": "2022-11-20T12:02:16.000000Z",
        "updated_at": "2022-11-20T12:02:16.000000Z",
        "sub_menus": []
    }
]

And its should be:

Menu 1
    Sub Menu 1
    Sub Menu 2
Menu 2

And then there is my html script:

            <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 class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <a class="dropdown-item" href="#" v-for="(item, index) in menu.sub_menus" :key="index">{{ item.name }}</a>
                </div>
            </div>

But the result is not what i expected, its showing like this:

Menu 1
    Sub Menu 1
    Sub Menu 2
Menu 2
    Sub Menu 1
    Sub Menu 2

And its not correctly. Maybe the problem is with my bootstrap class. Is there any suggestion for this problem? Thanks before for the help.

Tags:

3

Answers


  1. 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>
    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
  3. 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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search