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

Question

I installed the vue-tel-input library https://vuejsexamples.com/international-telephone-input-with-vue/ in my vuejs project. Why does my input field look like this with no country flags and no country code?

This may be related to an error I saw when installing the yarn library...

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

Here is my relevant component code...

<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>

Answer 1

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

Answer 2

You can use available props for the vue-tel-input library available here: https://iamstevendao.github.io/vue-tel-input/documentation/props.html

To add country flags and country codes you'll need to use dropdownOptions.showFlags and dropdownOptions.showDialCodeInList props resepectively. Remember dropdownOptions is an object hence you can include the prop as shown below:

<VueTelInput v-model="phoneNumber" :dropdownOptions = "{showFlags:true, showDialCodeInList:true}" v-bind="bindProps"></VueTelInput>

Here is a demo for the same: https://iamstevendao.github.io/vue-tel-input/