我使用 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"但徒勞無功。
uj5u.com熱心網友回復：
您需要使用“：”系結資料
:prepend-icon=“item.icon”
此外，您的密鑰不是唯一的，這是一種糟糕的形式。使用會更好
:key=“item.text”
從而避免重復鍵。或將您的“subgroupItems.id”更改為與“groupItems”中的 id 不匹配的數字
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521071.html
上一篇：更改Vue中的網格列