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

Question

用户界面中的错误

开发工具检查元素中的错误

在国旗旁边，undefined 即将到来。如何解决此错误

标签： vue.jsvuejs2vue-tel-input

Answer 1

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

<slot name="arrow-icon" :open="open">
  <span class="vti__dropdown-arrow">{{ open ? "▲&quot; : "▼&quot; }}</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>

那么应该一切都好。