在Vue中显示所选船旗国

mwecs4sa  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(135)

当选择国家时,国旗必须显示在选择选项中。我需要在Vue中这样做。

new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
select: null,
countries: [
  {
    name: "Albania",
    flag: "em-flag-al"
  },
  {
    name: "Anguilla",
    flag: "em-flag-ai"
  }
 ],
 }
 })

<div id="app">
 <v-app class="container">
<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>
 </v-app>
 </div>

或者可以参考https://codepen.io/aaha/pen/ZEbRwpy?editors=1010

gzszwxb4

gzszwxb41#

您可以使用另一个插槽进行选择:)

<template v-slot:selection="slotProps">
     <i :class="['mr-2', 'em', slotProps.item.flag]"></i>
       <span>{{ slotProps.item.name }}</span>
   </template>

相关问题