Vue.js and vue-phone-number-input package component : set country code and phone number programmatically

Question

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.

Let me paste the code here :

<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 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();
                });
            }
        }
    };

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

Rechaba

Answer 1

Unfortunately, this library has a critical bug: https://github.com/LouisMazel/vue-phone-number-input/issues/125

In short: currently it's impossible to initialize this component with phone number so that the country code would be selected based on the input.

Suitor

Answer 2

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"
/>

Deputy

can you have a look at a Vue.js related question here : #59458765 > – Rechaba