Vuetify - 带有嵌套列表项的导航抽屉答案

【问题标题】：Vuetify - Navigation Drawer with nested list itemsVuetify - 带有嵌套列表项的导航抽屉
【发布时间】：2020-04-14 22:43:06
【问题描述】：

我正在尝试创建一个带有嵌套列表项的导航抽屉，例如：Vuetify Material Dashboard

我的代码如下所示

<v-navigation-drawer v-model="drawer" app clipped>
            <v-list dense>
                <template>
                    <div v-for="item in items" :key="item.title">
                        <v-list-group v-if="item.items" v-model="item.active" :prepend-icon="item.action" no-action link>
                            <template v-slot:activator>
                                <v-list-item-content>
                                    <v-list-item-title v-text="item.title"></v-list-item-title>
                                </v-list-item-content>
                            </template>
                            <v-list-item v-for="subItem in item.items" :key="subItem.title" :to="subItem.to">
                                <v-list-item-icon>
                                    <v-icon v-text="subItem.action"></v-icon>
                                </v-list-item-icon>
                                <v-list-item-content>
                                    <v-list-item-title v-text="subItem.title"></v-list-item-title>
                                </v-list-item-content>
                            </v-list-item>
                        </v-list-group>
                        <v-list-item v-else :to="item.to" link>
                            <v-list-item-icon>
                                <v-icon v-text="item.action"></v-icon>
                            </v-list-item-icon>
                            <v-list-item-content>
                                <v-list-item-title v-text="item.title"></v-list-item-title>
                            </v-list-item-content>
                        </v-list-item>
                    </div>
                </template>
            </v-list>
        </v-navigation-drawer>

脚本：

items: [
                {
                    action: 'fa-chart-line',
                    title: 'Dashboard',
                    to: '/dashboard'
                },
                {
                    action: 'fa-user',
                    title: 'Attractions',
                    items: [
                        {
                            title: 'Home',
                            action: 'fa-barcode',
                            to: '/home'
                        }
                    ]
                },
                {...}
            ]
        }),

但是，当我单击非嵌套列表项时，其他项仍处于活动状态，并且活动类具有不同的颜色。

我没有在 Vuetify 的文档中找到任何带有嵌套和非嵌套元素菜单的示例，但我发现该模板正是我正在寻找的。p>

有人知道怎么做吗？

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

要解决此问题，您必须在 v-list-group 上添加 group 属性，该属性由您希望保持组活动的 URL 路径引导。

<v-list-group
  :group="'attractions'"
  v-if="item.items"     
  v-model="item.active"
  :prepend-icon="item.action"
  no-action
  link
>
....
</v-list-group>

在上述示例中，您的 v-list-group 仅在您的 route 包含“景点”时才有效

【讨论】：