不明点と実現したいこと

ネストされたリストのリンクはv-list-itemで実現できましたが、ネストされていない項目のリンク方法がわからない。
以下のソースの場合、ダッシュボードのリンクが通るようにしたい。

現在のソース

            <v-list nav dense>
                <v-list-group
                    v-for="menu in menus"
                    :key="menu.name"
                    :prepend-icon="menu.icon"
                    no-action
                    :append-icon="menu.subMenus ? undefined : ''">
                    <template v-slot:activator>
                        <v-list-item-content>
                            <v-list-item-title>{{ menu.title }}</v-list-item-title>
                        </v-list-item-content>
                    </template>
                    <v-list-item v-for="subMenu in menu.subMenus" :key="subMenu.title" :to="subMenu.link">
                        <v-list-item-content>
                            <v-list-item-title>{{ subMenu.title }}</v-list-item-title>
                        </v-list-item-content>
                    </v-list-item>
                </v-list-group>
            </v-list>

                menus: [
                    { title: 'ダッシュボード', icon: 'dashboard', link: '/dashboard' },
                    { title: 'システム設定', icon: 'system_update_alt',
                        subMenus: [
                            { title: 'システム設定', link: '/system' },
                            { title: '時刻設定', link: '/time' },
                        ],
                    },
                ],

試してみたこと

v-list-itemをtemplete内で実装すればと思い、template内に実装してみましたが、正しく表示されませんでした。

最後に

おわかりになる方、ご教授いただければ幸いです。

行動規範の内容に同意します

回答1件

自己解決

javascrpt
1            <v-list nav dense>
2                <template v-for="menu in menus">
3                    <!-- サブメニュー有りの場合-->
4                    <v-list-group
5                        v-if="menu.subMenus"
6                        :key="menu.name"
7                        :prepend-icon="menu.icon"
8                        no-action
9                        :append-icon="menu.subMenus ? undefined : ''"
10                    >
11                        <template v-slot:activator>
12                            <v-list-item-content>
13                                <v-list-item-title>{{ menu.title }}</v-list-item-title>
14                            </v-list-item-content>
15                        </template>
16                        <v-list-item
17                            v-for="subMenu in menu.subMenus"
18                            :key="subMenu.title"
19                            link :to="subMenu.link">
20                            <v-list-item-title> {{ subMenu.title }}</v-list-item-title>
21                            <v-list-item-icon>
22                                <v-icon>{{ subMenu.icon }}</v-icon>
23                            </v-list-item-icon>
24                        </v-list-item>
25                    </v-list-group>
26
27                    <!-- サブメニュー無しの場合-->
28                    <v-list-item
29                        v-else
30                        color="primary"
31                        link :to="menu.link"
32                    >
33                        <v-list-item-action>
34                            <v-icon>{{ menu.icon }}</v-icon>
35                        </v-list-item-action>
36                        <v-list-item-content>
37                            <v-list-item-title>
38                                {{ menu.title }}
39                            </v-list-item-title>
40                        </v-list-item-content>
41                    </v-list-item>
42                </template>
43            </v-list>