英文:
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.
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论