Vue.js 和 vue-phone-number-input 包组件：以编程方式设置国家代码和电话号码

Posted 2023-02-22

【中文标题】Vue.js 和 vue-phone-number-input 包组件：以编程方式设置国家代码和电话号码

【英文标题】：Vue.js and vue-phone-number-input package component : set country code and phone number programmatically

【发布时间】：2020-04-14 07:31:44

【问题描述】：

在我的 Laravel + Vue.js SPA（单页应用程序）中，我使用的是 BootstrapVue ， vue-phone-number-input 包和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 组件？

【参考方案1】：

您将电话号码设置为使用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"
/>

【讨论】：

你能在这里看看与 Vue.js 相关的问题吗：***.com/questions/59458265/… >

【参考方案2】：

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

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