如何使用v-for为Vuetify导航抽屉的分组添加自定义图标？

问题根源 #

你当前代码里的prepend-icon="item.icon"是静态字符串赋值，Vue不会将其解析为变量，所以所有分组都显示硬编码的mdi-account-circle图标。要实现动态绑定，必须使用Vue的v-bind语法（简写为:）。另外，子组循环的变量名item和外层分组的item重复，会导致变量覆盖问题，建议修改子组循环的变量名。

修改后的完整代码 #

<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="item.icon" <!-- 改为动态绑定语法 -->
      >
        <template v-slot:activator>
          <v-list-item-title>{{ item.text}}</v-list-item-title>
        </template>

        <!-- 子组循环变量名改为subItem，避免变量冲突 -->
        <v-list-item v-for="subItem in subgroupItems" :key="subItem.id">
          <v-list-item-icon>
            <v-icon>{{ subItem.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ subItem.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>

关键修改点 #

1. 动态绑定图标：将prepend-icon="mdi-account-circle"替换为:prepend-icon="item.icon"，让Vue读取每个groupItem的icon属性值，实现分组图标动态切换。
2. 修复变量冲突：子组循环的变量从item改为subItem，避免覆盖外层分组的item变量，确保数据读取逻辑正确。

内容的提问来源于stack exchange，提问作者mustafa00