<Multiselect
@change="onSelect"
:options="countries"
valueProp="iso2"
placeholder="Select countries"
:searchable="true"
:multiple="false"
:close-on-select="true"
:clear-on-select="false"
:preserve-search="true"
openDirection="bottom"
:max-height="600"
:max-select="1"
:object="true"
>
<template v-slot:option="{ option }">
<span :class="`fi fi-${option.iso2.toLowerCase()} mr-2`"></span>
{{ option.code }}
</template>
<template #singleLabel="{ option }">
<span :class="`fi fi-${option.iso2.toLowerCase()} mr-2`"></span>
<input v-model="option.name" /> </template>
</Multiselect>
Basically the issue I am facing here is that i want to show the selected option containing flag and its code in v-modal and show it , but now when i am selecting anything i can’t see any thing selected, I also tried adding v-modal field , it contained the selected value of country in form of object. I dont have problem with its value but I just want to show my user the selected option in form of the country code and flag .
Please let me know if anyone have any idea to achieve it