为啥我的 vue-tel-input 国家代码下拉列表在我的 vuejs 应用程序中格式不正确？

Posted 2023-02-16

【中文标题】为啥我的 vue-tel-input 国家代码下拉列表在我的 vuejs 应用程序中格式不正确？

【英文标题】：Why does my vue-tel-input country code dropdown not format properly in my vuejs app?为什么我的 vue-tel-input 国家代码下拉列表在我的 vuejs 应用程序中格式不正确？

【发布时间】：2021-09-08 11:08:22

【问题描述】：

我在我的 vuejs 项目中安装了 vue-tel-input 库 https://vuejsexamples.com/international-telephone-input-with-vue/。为什么我的输入字段看起来像这样，没有国家标志，也没有国家代码？

这可能与我在安装yarn库时看到的错误有关...

error /Users/xxx/Documents/Work/software/xx/xx/node_modules/vue-tel-input: Command failed.
Exit code: 1
Command: cd docs && npm ci --prefer-offline
Arguments: 
Directory: /Users/xxx/Documents/Work/software/xx/xx/node_modules/vue-tel-input
Output:
/bin/sh: line 0: cd: docs: No such file or directory
  [1]: https://i.stack.imgur.com/AwkyP.png

这是我的相关组件代码...

<template>
  <div>
    <VueTelInput v-model="phoneNumber" v-bind="bindProps"></VueTelInput>
  </div>
</template>

<script>
 import  VueTelInput  from 'vue-tel-input'
 import 'vue-tel-input/dist/css/component.css'
 import 'vue-tel-input/dist/css/sprite.css'

 export default 
   name: 'CuiRegister',
   computed: 
     ...mapState(['settings']),
     loading() 
       return this.$store.state.user.loading
     ,
   ,
  components:  VueTelInput 
 
</script>

【参考方案1】：

尝试在Vue的main.js中初始化vue-tel-input https://www.npmjs.com/package/vue-tel-input 参考这个链接

【讨论】：

您的代码中没有任何 bindProps，因为您没有数据方法，请删除它或创建数据方法并定义 bindProps。

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。