Bootstrap 下拉子菜单未根据父 ID 显示答案

【问题标题】：Bootstrap dropdown submenu not showing based on parent idBootstrap 下拉子菜单未根据父 ID 显示
【发布时间】：2022-11-22 09:42:48
【问题描述】：

我在 Vue 3 和 bootstrap 5.2 上使用 bootstrap 制作下拉菜单和子菜单时遇到问题

有我的 json 菜单数据：

[
    {
        "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": []
    }
]

它应该是：

Menu 1
    Sub Menu 1
    Sub Menu 2
Menu 2

然后是我的 html 脚本：

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

但是结果不是我所期望的，它的显示是这样的：

Menu 1
    Sub Menu 1
Menu 2
    Sub Menu 1

它不正确。也许问题出在我的引导程序类上。对这个问题有什么建议吗？感谢之前的帮助。

【问题讨论】：

仅使用 HTML 是否可以正常工作？
是的，它只使用 HTML @IrshadKhan

标签： laravel vue.js bootstrap-5

【解决方案1】：

你必须为它尝试嵌套循环。

<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>

【讨论】：

先生，它仍然不起作用，仍然显示相同的结果。

【解决方案2】：

我看到您正在为父 div 使用 id="dropdownMenuLink"，为子 div 使用 aria-labelledby="dropdownMenuLink"，请确保它们是动态的索引

【讨论】：