Vue.js和vue-phone-number-input软件包组件:以编程方式设置国家/地区代码和电话号码 [英] Vue.js and vue-phone-number-input package component : set country code and phone number programmatically

问题描述

在我的Laravel + Vue.js SPA(单页应用程序)中，我正在使用 BootstrapVue ， vue-phone-number-input 软件包和

In my Laravel + Vue.js SPA (Single Page Application), I am using BootstrapVue , vue-phone-number-input package and VeeValidate. Upon inputting the country code and phone number, I can retrieve them seperately in the methods part.

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

The mobile (or phone) number input is inside a form. After validating the form, I save the data ( country code and phone number each, as the component has 2 parts: country code and phone number. See the image in the provided link of the package) in database table. When the form page loads, input fields should also have values fetched from the database.

但是我找不到正确设置移动(或电话)输入字段值的方法.

But I cannot find a way to set the value to the mobile (or phone) input field correctly.

让我在此处粘贴代码:

<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)的电话号码.

JS part has the following content. Somehow I manage to get the user_profile object variable to contain the country code (nationalNumber) and phone number without country code (phoneNumber) from the database table.

 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组件?

So how can I set the country code and phone (or mobile) number to the vue-phone-number-input component programmatically ?

推荐答案

您将电话号码设置为使用v-model开始-这是两种方式的绑定.对于国家/地区代码，您可以像这样在default-country-code上使用v-bind:

You set the phone # to start by using v-model - it's a two way binding. For the country code, you use v-bind on default-country-code like this:

<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和vue-phone-number-input软件包组件:以编程方式设置国家/地区代码和电话号码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！