Bootstrap dropdown submenu not showing based on parent id-CodePudding

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  v-for="(menu, menuIndex) in menus" :key="menuIndex" role="button"
                id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                {{ menu.name }}

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

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

Menu 1
    Sub Menu 1
Menu 2
    Sub Menu 1

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

CodePudding user response：

you have to try nested loop for it.

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

CodePudding user response：

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