Проверьте поля ввода формы в дочернем компоненте из родительского компонента с помощью Vuelidate.

Question

Я новичок в Vue Js и Vuelidate.Только что попытался проверить поля ввода формы из родительского компонента, как здесь: https://github.com/monterail/vuelidate/issues/333

Дочерний компонент в родительском компоненте:

<contact-list ref="contactList" :contacts="contacts" @primaryChanged="setPrimary" @remove="removeContact" @ready="isReady => readyToSubmit = isReady"/>

Метод в дочернем:

computed: {
    ready() {
        return !this.$v.email.$invalid;
    }
},
watch: {
    ready(val) {
        this.$emit('ready', val);
    }
},

methods: {
    touch() {
        this.$v.email.$touch();
    }
}

Я вызываю метод touch () от родителя примерно так:

submit() {
            this.$refs.contactList.touch();
        },

Но я получаю эту ошибку:

Error in event handler for "click": "TypeError: this.$refs.contactList.touch is not a function".

Любые идеи?Благодаря.

Answer 1

Я нашел другое решение для этой проверки, это очень просто.Дочерний компонент в родительском компоненте:

<contact-list ref="customerContacts" :contacts="customer.contacts" />

Проверки в дочернем компоненте:

:validator="$v.model.$each[index].name
...
validations: {
    model: {
        required,
        $each: {
            name: {
                required
            },
            email: {
                required,
                email
            },
            phone: {
                required
            }
        }

    }

}

И при отправке в родительском компоненте:

async onSubmit() {
            if(this.$refs.customerContacts.valid())
...