Question

我正在尝试使用嵌套列表项创建导航抽屉，例如：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的文档中找到带有嵌套和非嵌套元素的菜单的任何示例，但发现正是我想要的模板。

有人知道该怎么做吗？

Answer 1

要解决此问题，您必须在<mat-form-field> <mat-label>Division</mat-label> <input matInput type="text" [(ngModel)]="division" (ngModelChange)="onChange($event)" [matAutocomplete]="divisions" name="division2" [divisionValidator]="this.divisionList" (ngModelChange)="autoCompleteFilter($event)" #division2="ngModel" >  </mat-form-field>上添加group属性，该属性要根据您要保持该组处于活动状态的网址路径进行引导。

v-list-group

在上面的示例中，您的<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包含“景点”时才处于活动状态

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

1 个答案: