使用图像 Vuetify v-select

Question

我正在使用 Vuetify v-select 组件：https ://vuetifyjs.com/en/components/selects/

我想用这样的图像进行选择：

但我没有在文档中找到任何内容

Answer 1

您必须使用项目插槽https://vuetifyjs.com/en/components/selects/#api

<v-select :items="items" label="Standard">
   <template v-slot:selection="{ item, index }">
      <img :src="item.image">{{ item.name }}
   </template>
   </template>
   <template v-slot:item="{ item }">
      <img :src="item.image">{{ item.name }}
   </template>
</v-select>

JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { name: 'Foo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Bar', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Hoo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'},
      { name: 'Coo', image: 'https://www.gravatar.com/avatar/b17065ea1655f1e3283aac8d8fc16019?s=48&d=identicon&r=PG'}],
  }),
})

JSFiddle：https ://codepen.io/reijnemans/pen/vYNadMo ? editors = 1010

Answer 2

您可以利用插槽将图像内容填充到选择上。我使用https://emoji-css.afeld.me/来获取国家/地区的国旗。

请参阅示例 Codepen：https://codepen.io/aaha/pen/ZEbRwpy? editors=1011 我无法填写完整的国家/地区列表。如果您能填写并分享，那就太好了，我也可以在某个地方使用它。：D

<v-select
  v-model="select"
  :items="countries"
  label="Select"
  item-text="name"
  >
  <template v-slot:item="slotProps">
    <i :class="['mr-2', 'em', slotProps.item.flag]"></i>
      {{slotProps.item.name}}
    </template>
 </v-select>

data: {
    select: null,
    countries: [
      {
        name: "Andorra",
        flag: "em-flag-ad"
      },
      {
        name: "Arab Emirates",
        flag: "em-flag-ae"
      },
      {
        name: "Afghanistan",
        flag: "em-flag-af"
      },
      {
        name: "Antigua & Barbuda",
        flag: "em-flag-ag"
      },
      {
        name: "Albania",
        flag: "em-flag-al"
      },
      {
        name: "Anguilla",
        flag: "em-flag-ai"
      }
   ],
  }