如何在 Vuetify select 下拉列表中使用图标作为标签？

Question

我是 Vue/Vuetify 的新手。我正在为我正在处理的站点处理 select 选项，我想使用图标作为标签而不是文本。我想做如下图所示的事情，但我不确定是否可行。任何指导将不胜感激。

谢谢！

HTML

    <div id="app">
  <v-app class="container">
    <v-select
      v-model="select"
      :items="permissions"
      label="Select"
      item-text="name"
    >
      <template v-slot:item="slotProps" >
        <i :class="['mr-2', 'mdi', slotProps.item.flag]"></i>
        {{slotProps.item.name}}
      </template>
     </v-select>
  </v-app>
</div>

VUEJS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    select: null,
    permissions: [
      {
        name: "Global",
        flag: "mdi-earth"
      },
      {
        name: "Private",
        flag: "mdi-lock"
      }
   ],
  }
})

Answer 1

您可以为 v-select 使用 vuetify 选择槽并显示所选项目的图标而不是测试。像这样：

<template>
  <v-container fluid>
    <v-select
      v-model="value"
      :items="items"
      label="Select Item"
      multiple
    >
      <template #selection="{ item }">
        <v-icon> {{ getItemIcon(item) }} </v-icon>
      </template>
    </v-select>
  </v-container>
</template>

并且你需要根据文本return编写getItemIcon方法

图标。

如何在 Vuetify select 下拉列表中使用图标作为标签？

How can I use an icon for a label in a Vuetify select dropdown?

vue.js

vuetify.js