Vue.js 带有子菜单的 Vuetify 导航抽屉

正如标题所说，我正试图拥有一个导航抽屉，其中包含可扩展的子菜单，用于某些选项.像"用户配置文件"主菜单选项一样，主菜单选项可能有"更新联系人详细信息"和"查看注册"子菜单.

我试过几种方法，基本上归结到相同的两个问题.因 for each 菜单选项都是一个列表平铺，要么子菜单堆叠在它的右侧(如中所示，整个子菜单位于同一个平铺中)，要么整个菜单选项列表都有这些下拉图标，而实际上只有一个菜单选项有一个子菜单.此外，我下面的第二个代码片段还阻止您导航到任何主菜单链接，这不是我们想要的.

示例1，其中子菜单与主菜单选项卡在同一个磁贴中.

<div v-for="(link, i) in links" :key="i">
    <v-list-tile v-if="!link.subLinks" :to="link.to" :active-class="color" avatar class="v-list-item">
        <v-list-tile-action>
            <v-icon>{{ link.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-title v-text="link.text"/>
    </v-list-tile>

    <div v-else>
        <v-list-tile avatar class="v-list-item">
            <v-list-tile-action>
                <v-icon>{{ link.icon }}</v-icon>
            </v-list-tile-action>
            <v-list-tile-title v-text="link.text"/>
            <v-list-group>
                <v-list-tile sub-group v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color" avatar class="v-list-item">
                    <v-list-tile-title v-text="subLink.text"/>
                </v-list-tile>
            </v-list-group>
         </v-list-tile>
     </div>
</div>

示例2，其中每个菜单选项都有一个下拉箭头，即使是没有任何子菜单的选项.

<v-list-group v-for="(link, i) in links" :key="i" :prepend-icon="link.icon" :to="link.to" :active-class="color" avatar class="v-list-item">
    <template v-slot:activator>
        <v-list-tile>
            <v-list-tile-title>{{ link.text }}</v-list-tile-title>
        </v-list-tile>
    </template>

    <v-list-tile v-for="(subLink, j) in link.subLinks" :key="j" :to="subLink.to" :active-class="color">
        <v-list-tile-content>
            <v-list-tile-title>{{ subLink.text }}</v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</v-list-group>

这是我使用的数据样本

links: [
    {
        to: '/',
        icon: 'mdi-view-dashboard',
        text: 'Dashboard',
    },
    {
        icon: 'mdi-account',
        text: 'User Profile',
        subLinks: [
            {
                to: '/update-contact',
                text: 'Update Contact Details',
            },
            {
                to: '/review-registration',
                text: 'Review Registration',
            },
        ],
    },
],

我想做的是有一个主菜单，可以 Select 添加我认为合适的子菜单.不幸的是，我似乎不知道如何混合和匹配列表组和列表平铺来完成我想要的事情.我非常感谢提供的任何帮助.谢谢