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

问题描述

在我的 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组件？

标签： validationvue.jsphone-numberbootstrap-vuevee-validate

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

问题描述

解决方案

推荐阅读