Vue.js 和 vue-phone-number-input package 组件:以编程方式设置国家/地区代码和电话

Question

在我的Laravel + Vue.js SPA(单页应用程序(中，我正在使用BootstrapVue， vue-phone-number-input Package 和 VeeValidate。输入国家代码和电话号码后，我可以在methods部分中分别检索它们。

手机(或电话(号码输入位于表单内。验证表单后，我保存数据(每个国家/地区代码和电话号码，因为该组件有两部分：国家/地区代码和电话号码。请参阅数据库表中提供的包链接中的图像。加载表单页时，输入字段也应具有从数据库中获取的值。

但是我找不到正确设置移动(或手机(输入字段值的方法。

让我在这里粘贴代码：

<template>
<ValidationObserver ref="form" v-slot="{ passes }">
<div id="registration_form">
<b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">
<ValidationProvider vid="mobile" rules="required" name="mobile" v-slot="{ valid, errors }">
<b-form-group
label="Mobile:"
label-for="exampleInput1"
>
<vue-phone-number-input
v-model="mobile"
default-country-code="BD"
required
:state="errors[0] ? false : (valid ? true : null)"
@update="updatePhoneNumber"
placeholder="Enter Mobile Number"
/>

<b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
</b-form-group>
</ValidationProvider>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div><!-- end of id registration_form-->
</ValidationObserver>
</template>

JS部分有以下内容。不知何故，我设法从数据库表中获取user_profile对象变量以包含国家代码(nationalNumber(和电话号码，而无需国家代码(phoneNumber(。

import VuePhoneNumberInput from 'vue-phone-number-input';
import 'vue-phone-number-input/dist/vue-phone-number-input.css';
export default {
name: "EditProfile",
components: {
ValidationObserver,
ValidationProvider,
VuePhoneNumberInput
},
data: () => ({
mobile:user_profile.phoneNumber,
national_number:user_profile.nationalNumber,

}),

methods: {
updatePhoneNumber(data) {
this.mobile = data.phoneNumber;
this.national_number = data.nationalNumber;
},
onSubmit() {
console.log("Form submitted yay!");
},
resetForm() {
this.name = "";
this.email = "";
this.address="";
requestAnimationFrame(() => {
this.$refs.form.reset();
});
}
}
};

那么如何以编程方式将国家/地区代码和电话(或手机(号码设置为vue-phone-number-input组件呢？

Answer 1

不幸的是，这个库有一个严重的错误： https://github.com/LouisMazel/vue-phone-number-input/issues/125

简而言之：目前无法使用电话号码初始化此组件，以便根据输入选择国家/地区代码。

Answer 2

您将电话 # 设置为使用v-model开始 - 这是一个双向绑定。 对于国家/地区代码，您可以在default-country-code上使用v-bind，如下所示：

<vue-phone-number-input
v-model="mobile"
:default-country-code="national_number"
required
:state="errors[0] ? false : (valid ? true : null)"
@update="updatePhoneNumber"
placeholder="Enter Mobile Number"
/>