CODEWITHSUNDEEP
vue.jsvuejs2vue-tel-input
Harsha Lekharaju
Harsha Lekharaju

Reputation: 1

Undefined in country flag UI in vue-tel-input

Error in UI

Error in the dev tools inspect element

Beside the country flag, undefined is coming. How to resolve this error

Upvotes: -1

Views: 1608

Answers (1)

Yikhan
Yikhan

Reputation: 46

I just came across the same issue and figured out the solution from their source code: source code

<slot name="arrow-icon" :open="open">
  <span class="vti__dropdown-arrow">{{ open ? "▲" : "▼" }}</span>
</slot>

If you look at the code above, the part which becomes 'undefined' is actually the arrow symbol and there should be default settings in the slot, where somehow this default setting is not working. As it is a Vue slot, you can simply fix it by defining your own arrow symbols here:

<vue-tel-input
v-model="phoneNumber"
@open="onDropdownOpen(true)"
@close="onDropdownOpen(false)"
>
<template v-slot:arrow-icon>
  <span>{{ open ? '▲' : '▼' }}</span>
</template>
</vue-tel-input>

Then it should be all good.

Upvotes: 3

Related Questions