小编Tho*_*ear的帖子

我有一个带有嵌套 v-list-groups 的导航侧边栏。根据文档， v-list-group 的“group”属性将根据路由命名空间扩展组。

请参阅： https: //vuetifyjs.com/en/components/lists/

这与顶级 v-list-group 配合得很好。

如果我重新加载页面并且路线与“group”属性匹配，它将打开。

它不适用于子组 v-list-groups。当我重新加载页面时，我可以看到子组关闭，所以我认为组道具正在工作。但有什么东西让它立即关闭。

我的代码有点复杂，我必须原谅我的变量命名。我正在渲染导航项目列表，如果它们没有定义子组，它将呈现为常规项目。如果它们有子组，则会呈现子组。这降低了两个级别。

这样我就可以在单个 json 文件中定义整个导航栏并导入它。

<template>
    <v-list dense nav>
        <template v-for="(sidebarItem, sidebarIndex) in sidebarItems">
            <v-list-item
                v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
                :key="sidebarIndex"
                :to="sidebarItem.linkTo"
                nuxt
            >
                <v-list-item-action>
                    <v-icon>{{ sidebarItem.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                    <v-list-item-title v-text="sidebarItem.title" />
                </v-list-item-content>
            </v-list-item>

            <v-list-group
                v-if="
                    (!arrayIsEmptyOrUndefined(sidebarItem.subGroup) &&
                    typeof sidebarItem.subGroup !== 'undefined')
                "
                :key="sidebarIndex"
                :prepend-icon="sidebarItem.icon"
                :group="sidebarItem.linkTo"
            >
                <template v-slot:activator>
                    <v-list-item-content>
                        <v-list-item-title>{{ sidebarItem.title }}</v-list-item-title>
                    </v-list-item-content>
                </template>

                <v-list-item
                    v-if="arrayIsEmptyOrUndefined(sidebarItem.subGroup)"
                    :key="subGroupIndex"
                    :to="sidebarItem.linkTo"
                    nuxt
                >
                    <v-list-item-action>
                        <v-icon>{{ sidebarItem.icon }}</v-icon>
                    </v-list-item-action>
                    <v-list-item-content>
                        <v-list-item-title v-text="sidebarItem.title" /> …