Binding saved phone number to vue tel input for the purpose of editing

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?

score 2 · Accepted Answer · answered Jun 02 '21 at 19:37

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.

That's great. Seems to work so far as I have tested it. Thank you. I have just seen this in the docs but it is not clear. It seems a pretty basic requirement to cover. Thank you. — RGriffiths, Jun 02 '21 at 21:21

Binding saved phone number to vue tel input for the purpose of editing

1 Answers1