Question

我目前正在尝试在v-icon模板中呈现动态vuetify组件。我有一个项目列表，我想为每个项目设置一个特定的图标。

所以我的清单是：

  <v-list-item
    v-for="application in installedApplications"
    :key="application.id"
    :to="{ name: application.verboseName + 'Dashboard' }"
    link>
    <v-list-item-icon>
      <v-tooltip right>
        <template v-slot:activator="{ on }">
          <v-icon v-on="on">mdi-{{ application.icon }}</v-icon>
        </template>
        <span>{{ application.verboseName }}</span>
      </v-tooltip>
    </v-list-item-icon>
    <v-list-item-content>
      <v-list-item-title>
        {{ application.verboseName }}
      </v-list-item-title>
    </v-list-item-content>
  </v-list-item>

您会看到我循环installedApplications来用图标填充侧边栏。我的application具有属性icon，因此执行application.icon会返回类似home，archive或类似here的图标名称。

执行<v-icon>mdi-home</v-icon会正确显示所需的图标，而我希望能够执行<v-icon>mdi-{{ application.icon }}</v-icon>（我在上面的模板中尝试过），但是它不起作用。

有什么办法解决吗？也许我错过了一些细节？

Answer 1

您可以更改此行：

<v-icon v-on="on">mdi-{{ application.icon }}</v-icon>

收件人：

<v-icon v-on="on"> {{ `mdi-${application.icon}` }} </v-icon>

这是我为此创建的Codepen演示。

vuetify模板中的动态v-icon

1 个答案: