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

问题描述

我使用 vue-tel-input 输入电话号码。

电话号码输入

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

检查它是否有效的方法：

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

更新电话号码的方法：

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

因此这将使用完整的电话号码作为字符串更新用户，例如“+447766554433”

我现在正尝试在 vue-tel-input 中显示这个保存的字符串，以便编辑它。我的问题是：

首先如何将保存的值绑定到 vue-tel-input？

其次，我认为我必须从 number 对象中分别保存 countryCallingCode 和 nationalNumber 是否正确，或者有没有办法从单个存储值中提取这两个部分？

解决方法

将 vue-tel-input 与 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,}"
      />
    </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>

在我看来，vue-tel-input 并不擅长解析电话号码。如果你用一个格式化的电话号码“喂”它，那么它可以理解但并没有真正设置好。

vue-tel-input vue.js