在vue-tel-input的国家标志UI中未定义

Question

界面错误

开发工具检查元素

错误在国旗旁边，未定义的正在到来。如何解决此错误

Answer 1

我刚刚遇到了同样的问题，并从他们的源代码中找到了解决方案:源代码

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

如果你看上面的代码，变成"未定义"的部分实际上是箭头符号，槽中应该有默认设置，不知怎么的，这个默认设置不起作用。由于它是一个Vue槽，您可以通过在这里定义自己的箭头符号来简单地修复它:

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

那么一切都会好起来的。