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

Posted 2023-02-23

【中文标题】Vuetify - 带有嵌套列表项的导航抽屉

【英文标题】：Vuetify - Navigation Drawer with nested list items

【发布时间】：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>

有人知道怎么做吗？

【参考方案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 包含“景点”时才有效