【Vue电话号码输入框(PhoneNumber Input)】 国家代码在输入框中重复怎么处理？

Vue PhoneNumber Input依赖了libphenumber-js库来解析电话号码。这个问题我也遇到过，需要首先使用libphenumber-js库中的parsePhoneNumberFromString解析电话号码，然后使用vue-phone-number-inputbase组件中的emitValue来触发验证并设置正确的国家，而不是直接使用v-model-model。

<template>
    <div>
        <VuePhoneNumberInput v-model="phoneNumber" ref="vuePhoneNumberInput"></VuePhoneNumberInput>
    </div>
</template>

<script>
import Vue from 'vue'
import { parsePhoneNumberFromString } from 'libphonenumber-js'

export default Vue.extend({
    props: {
        initialPhoneNumber: String,
    },

    data() {
        return {
            phoneNumber: "",
        }
    },

    mounted() {
        this.setDefaults()
    },

    methods: {
        setDefaults() {
            let parsedPhoneNumber = parsePhoneNumberFromString(this.initialPhoneNumber, 'NO' /* your default supported country, e.g. NO */)

            if (parsedPhoneNumber) {
                this.$nextTick(() => {
                    this.$refs.vuePhoneNumberInput.emitValues({
                        countryCode: parsedPhoneNumber.country,
                        phoneNumber: parsedPhoneNumber.nationalNumber,
                    })
                })
            }
        }
    },
})
</script>