Afficher les drapeaux des pays sélectionnés dans Vue

Question

Après avoir sélectionné un pays, le drapeau doit être affiché dans les options de sélection. Je dois le faire dans 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>

Ou vous pouvez vous référer à https://codepen.io/aaha/pen/ZEbRwpy?editors=1010

Answer 1

Vous pouvez utiliser un autre emplacement pour choisir :)