将保存的电话号码绑定到 vue tel 输入以进行编辑

Question

I am using vue-tel-input for entering a phone number.

Phone number entry

<vue-tel-input
    v-model="phonenumber"
    @validate="telValidate"
></vue-tel-input>

Method to check it is valid:

telValidate(telnumber) {
    this.validatedphonenumber = telnumber.number;
    this.validphonenumber = telnumber.valid;
},

Method to update phone number:

this.$axios.put("users/" + this.accountId, {
    phonenumber: this.validatedphonenumber
});

So this will update the user with the complete telephone number as a string such as "+447766554433"

I am now trying to display this saved string in a vue-tel-input for the case of editing it. My questions are:

Firstly how do I bind the saved value to the vue-tel-input?

Secondly am I right in thinking that I would have to save the countryCallingCode and the nationalNumber from the number object sperately or is there way of extracting the two parts from the single stored value?

Answer 1

Using vue-tel-input with autoformat :

 new Vue({ el: "#app", data() { return { phonenumber: null, validNumber: '', } }, methods: { telValidate(telnumber) { if (telnumber.valid) { this.validNumber = telnumber.number } else { this.validNumber = '' } }, }, template: ` <div> INPUT:<br /> <vue-tel-input v-model="phonenumber" @validate="telValidate" autoformat:dropdownOptions="{ showFlags: false, showDialCodeInSelection: true, }" /> <hr> EDIT:<br /> <vue-tel-input v-model="validNumber" autoformat:dropdownOptions="{ showFlags: false, showDialCodeInSelection: true, }" /> </div> ` })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-tel-input@5.3.0/dist/vue-tel-input.umd.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-tel-input@5.3.0/dist/vue-tel-input.min.css"> <div id="app"></div>

It seems to me that vue-tel-input is not really good at parsing phone numbers. If you "feed" it with a formatted phone number, then it quite understands but doesn't really set itself up.