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

问题

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 ?

回答1:

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

来源：https://stackoverflow.com/questions/59448058/vue-js-and-vue-phone-number-input-package-component-set-country-code-and-phone