如何将已保存的电话号码绑定到Vue电话输入,以便进行编辑?

huangapple go评论74阅读模式
英文:

How can I bind saved phone number to vue tel input for the purpose of editing

问题

这是绑定值并将其保存到数据库的操作。

但在编辑模式下,它会用国家代码覆盖已保存的值。

如何将已保存的值绑定到vue-tel-input?

是否有解决方法或者这个行为不能被改变?

英文:

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?

答案1

得分: 1

要将保存的电话号码绑定到vue-tel-input以进行编辑,您可以使用vue-tel-input组件提供的value属性。

首先确保保存的电话号码存储在您的Vue组件的属性中,例如client.ClientPhone。

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

这将绑定保存的电话号码到vue-tel-input,并且vue-tel-input将根据mode属性自动格式化电话号码。在这种情况下,电话号码将被格式化为国际电话号码。

如果您希望阻止vue-tel-input使用国家代码覆盖保存的电话号码,您可以将autoFormat属性设置为false。这将禁用电话号码的自动格式化,vue-tel-input将按原样显示保存的电话号码。

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

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.

&lt;template&gt;
  &lt;div&gt;
     &lt;vue-tel-input v-model=&quot;client.ClientPhone&quot; v-bind=&quot;bindPropsUserInfo&quot; :value=&quot;client.ClientPhone&quot;&gt;&lt;/vue-tel-input&gt;
  &lt;/div&gt;
&lt;/template&gt;

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.

&lt;template&gt;
  &lt;div&gt;
     &lt;vue-tel-input v-model=&quot;client.ClientPhone&quot; v-bind=&quot;bindPropsUserInfo&quot; :value=&quot;client.ClientPhone&quot; :autoFormat=&quot;false&quot;&gt;&lt;/vue-tel-input&gt;
  &lt;/div&gt;
&lt;/template&gt;

huangapple
  • 本文由 发表于 2023年1月9日 18:41:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/75056086.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定