How to add group icon using v-for?-CodePudding

I create an app using Vue2 and Vuetify. I can succesfully add group names and subgroups names icons to my navigation drawer using v-for but unfortunately I can't add group icons. There's only one property called prepend-icon which allows to set a group icon but I would like to add it looping through array. This is my code:

<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>>

and this is what I got as a result:

All group icons are the same. I know that I hard-coded icon name in prepend-icon but I have no idea how to do it looping through groupItems array. I tried prepend-icon="item.icon" but in vain.

CodePudding user response：

You need to bind the data with ‘:’

:prepend-icon=“item.icon”

Also, your keys are not unique which is poor form. It would be better to use

:key=“item.text”

Thus avoiding duplicate keys. Or change your ‘subgroupItems.id’ to numbers that do not match the ids from ‘groupItems’