使用 Vuelidate 从父组件验证子组件中的表单输入字段 [英] Validate form input fields in child component from a parent component with Vuelidate

问题描述

我是 Vue Js 和 Vuelidate 的新手.只是尝试验证来自父组件的表单输入字段，如下所示:https://github.com/monterail/vuelidate/issues/333

I am new to Vue Js and Vuelidate. Just tried to validate form input fields from a parent component like here: 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() 方法:

I'm calling the touch() method from the parent like so:

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

但我收到此错误:

click"事件处理程序错误:TypeError: this.$refs.contactList.touch is not a function".

有什么想法吗?谢谢.

推荐答案

我为这个验证找到了另一个解决方案，它非常简单.父组件中的子组件:

I have found another solution for this validation, it's very simple. Child component in the parent:

<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())
...

这篇关于使用 Vuelidate 从父组件验证子组件中的表单输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！