When the country is selected, the country flag must be displayed in select option. I need to do that in 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 >
<v-select
v-model="select"
:items="countries"
label="Select"
item-text="name"
>
<template v-slot:item="slotProps" >
<i :></i>
{{slotProps.item.name}}
</template>
</v-select>
</v-app>
</div>
Or you can refer to https://codepen.io/aaha/pen/ZEbRwpy?editors=1010
CodePudding user response:
You can use another slot for the selection :)
<template v-slot:selection="slotProps">
<i :></i>
<span>{{ slotProps.item.name }}</span>
</template>