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

Question

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

Here is the code:

<template>
<div>
   <vue-tel-input v-model="client.ClientPhone" v-bind="bindPropsUserInfo"></vue-tel-input>
</div>
</template>


<script>
  data() {
    return {
      bindPropsUserInfo: {
        mode: "international",
        autoFormat: false,
        required: true,
        enabledCountryCode: true,
        enabledFlags: true,
        autocomplete: "off",
        name: "telephone",
        maxLen: 25,
        inputOptions: {
          showDialCode: true
        }
      }
    };
  },
</script>

`

` This is binding the value and saving it to the database.

But in the edit mode, It override the saved value with country code.

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

Is there any solution for this or this behavior can't be changed?

Answer 1

To bind the saved phone number to the vue-tel-input for the purpose of editing, you can use the value prop provided by the vue-tel-input component.

First make sure that the saved phone number is stored in a property of your Vue component, such as client. ClientPhone.

<template>
  <div>
     <vue-tel-input v-model="client.ClientPhone" v-bind="bindPropsUserInfo" :value="client.ClientPhone"></vue-tel-input>
  </div>
</template>

This will bind the saved phone number to the vue-tel-input, and the vue-tel-input will automatically format the phone number based on the mode prop. In this case, the phone number will be formatted as an international phone number.

If you want to prevent the vue-tel-input from overwriting the saved phone number with the country code, you can set the autoFormat prop to false. This will disable automatic formatting of the phone number, and the vue-tel-input will display the saved phone number as it is.

<template>
  <div>
     <vue-tel-input v-model="client.ClientPhone" v-bind="bindPropsUserInfo" :value="client.ClientPhone" :autoFormat="false"></vue-tel-input>
  </div>
</template>