如何将保存的电话号码绑定到电话输入以便编辑

Question

我正在使用value -tel-input输入电话号码。

代码如下:

<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>

'这是绑定值并将其保存到数据库。

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

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

是否有解决方案，或者这种行为不能改变?

Answer 1

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

首先确保保存的电话号码存储在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将根据模式prop自动格式化电话号码。在本例中，电话号码将被格式化为国际电话号码。

如果您想要防止vue-tel输入用国家代码覆盖保存的电话号码，您可以将autoFormat prop设置为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>