Компонент пакета Vue.js и vue-phone-number-input: программная установка кода страны и номера телефона

В моем Laravel + Vue.js SPA (одностраничное приложение) я использую BootstrapVue, пакет vue-phone-number-input и VeeValidate. После ввода кода страны и номера телефона я могу получить их по отдельности в части methods.

Ввод номера мобильного телефона (или телефона) находится внутри формы. После проверки формы я сохраняю данные (код страны и номер телефона, так как компонент состоит из 2 частей: код страны и номер телефона. См. Изображение в предоставленной ссылке пакета) в базе данных. стол. Когда страница формы загружается, поля ввода также должны иметь значения, извлеченные из базы данных.

Но я не могу найти способ правильно установить значение в поле ввода мобильного (или телефона).

Позвольте мне вставить код сюда:

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


validation vue.js phone-number vee-validate bootstrap-vue
person Istiaque Ahmed    schedule 22.12.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

К сожалению, в этой библиотеке есть критическая ошибка: https://github.com/LouisMazel/vue-phone-number-input/issues/125

Вкратце: в настоящее время невозможно инициализировать этот компонент с помощью номера телефона, чтобы код страны выбирался на основе ввода.

person efomo    schedule 15.11.2020

arrow_upward
1
arrow_downward

Вы устанавливаете номер телефона для запуска с помощью v-model - это двусторонняя привязка. Для кода страны используйте v-bind на default-country-code следующим образом:

<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"
/>
person Ryley    schedule 23.12.2019
comment
можете ли вы посмотреть здесь вопрос, связанный с Vue.js: stackoverflow.com/questions/59458265/› - person Istiaque Ahmed; 23.12.2019