Vuetify - 중첩된 목록 항목이 있는 탐색 드로어

Vuetify - 중첩된 목록 항목이 있는 탐색 드로어

다음과 같은 중첩 목록 항목을 사용하여 탐색 드로어를 만들려고 함:Vuetify 재료 대시보드

여기 내 코드가 어떻게 생겼는지 보여줘.

<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의 문서에서는 어떤 예도 찾지 못했지만, 내가 찾고 있는 템플릿이 바로 그것이라는 것을 발견했다.

그런 거 할 줄 아는 사람 있어?

이 문제를 해결하려면 추가하십시오.group의 소유물.v-list-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'attractions' 포함

참조URL: https://stackoverflow.com/questions/59458780/vuetify-navigation-drawer-with-nested-list-items