v-for를 사용하여 그룹 아이콘을 추가하는 방법

Vue2와 Vuetify를 사용하여 앱을 만듭니다.다음을 사용하여 그룹 이름 및 하위 그룹 이름 + 아이콘을 탐색 드로어에 성공적으로 추가할 수 있습니다.v-for아쉽게도 그룹 아이콘은 추가할 수 없습니다.이 건물에는prepend-icon그룹 아이콘을 설정할 수 있지만 어레이를 통해 루핑하여 추가하고 싶습니다.코드는 다음과 같습니다.

<template>
<v-navigation-drawer
app
permanent>
<v-list
nav
dense>
<v-list-group
v-for="item in groupItems"
:key="item.id"
no-action
prepend-icon="mdi-account-circle">
<template v-slot:activator>
 <v-list-item-title>

{{ item.text}}
 </v-list-item-title>
</template>
<v-list-item
v-for="item in subgroupItems"
:key="item.id">
 <v-list-item-icon>

<v-icon> {{ item.icon }} </v-icon>
 </v-list-item-icon>
 <v-list-item-content>

<v-list-item-title> {{ item.text }}</v-list-item-title>
 </v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-navigation-drawer> </template>
<script> export default {
data () {
return {
groupItems: [
{ id: 1,
text: "People", icon: "mdi-airplane" },
{ id: 2, text: "Accounts", icon: "mdi-ferry" },
{ id: 3, text: "Cars", icon: "mdi-truck" },
],
subgroupItems: [
{ id: 1,
text: "GP", icon: "mdi-airplane" },
{ id: 2, text: "Stats", icon: "mdi-ferry" }
]
} },
} </script>
<style scoped>
</style>>

그 결과, 다음과 같은 결과가 나왔습니다.

모든 그룹 아이콘이 동일합니다.아이콘 이름을 하드코딩한 것을 알고 있습니다.prepend-icon어떻게 해야 할지 모르겠어요groupItems배열. 나는 시도했다.prepend-icon="item.icon"헛수고였다.

질문에 대한 답변