如何将已保存手机号绑定到vue-tel-input以实现编辑功能

你的问题根源在于组件的international模式要求v-model绑定的是带国际国家码的完整号码（如+8613800138000），如果数据库存储的是不带国家码的纯手机号，组件会自动用默认国家码覆盖原有值，导致编辑时显示异常。以下是几种可行的解决方案：

方案一：存储带国家码的完整号码 #

保存数据时，直接存储组件v-model返回的带国家码格式的号码（比如+8613800138000）。编辑模式下直接绑定该值，组件会自动解析国家码和手机号部分，不会出现覆盖问题。

方案二：初始化时补全国家码 #

如果数据库仅存储纯手机号，可在组件初始化前为目标字段拼接默认国家码：

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

<script>
export default {
  data() {
    return {
      bindPropsUserInfo: {
        mode: "international",
        autoFormat: false,
        required: true,
        enabledCountryCode: true,
        enabledFlags: true,
        autocomplete: "off",
        name: "telephone",
        maxLen: 25,
        inputOptions: {
          showDialCode: true
        }
      }
    };
  },
  created() {
    // 假设默认国家为中国，数据库存的是纯数字手机号
    if (this.client.ClientPhone && !this.client.ClientPhone.startsWith('+')) {
      this.client.ClientPhone = `+86${this.client.ClientPhone}`;
    }
  }
};
</script>

方案三：切换为国内模式适配纯手机号 #

调整组件配置为national模式，关闭国家码显示，这样组件可直接绑定纯手机号：

<script>
export default {
  data() {
    return {
      bindPropsUserInfo: {
        mode: "national", // 切换为国内模式
        autoFormat: false,
        required: true,
        enabledCountryCode: true,
        enabledFlags: true,
        autocomplete: "off",
        name: "telephone",
        maxLen: 25,
        inputOptions: {
          showDialCode: false // 隐藏国家码
        }
      }
    };
  }
};
</script>

注意：这种模式下如果允许用户切换国家，需要额外处理号码格式转换逻辑。

方案四：自动解析号码匹配国家码 #

利用组件内置的号码解析方法，初始化时自动识别号码对应的国家码并补全：

<template>
  <div>
    <!-- 添加ref用于调用组件方法 -->
    <vue-tel-input ref="telInput" v-model="client.ClientPhone" v-bind="bindPropsUserInfo"></vue-tel-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bindPropsUserInfo: {
        mode: "international",
        autoFormat: false,
        required: true,
        enabledCountryCode: true,
        enabledFlags: true,
        autocomplete: "off",
        name: "telephone",
        maxLen: 25,
        inputOptions: {
          showDialCode: true
        }
      }
    };
  },
  async created() {
    if (this.client.ClientPhone && !this.client.ClientPhone.startsWith('+')) {
      // 调用组件的号码解析方法
      const parsedNumber = await this.$refs.telInput.parsePhoneNumber(this.client.ClientPhone);
      this.client.ClientPhone = parsedNumber.number; // 获取带国家码的完整号码
    }
  }
};
</script>

以上方案均可解决编辑模式下号码被覆盖的问题，可根据你的存储逻辑和业务需求选择适配方案。

内容的提问来源于stack exchange，提问作者Mukhtar Hussain