如何使用vee validate 3验证输入事件

问题描述

我正在尝试对输入事件进行验证，但是当console.log（valid）中的onInput事件触发时，由于它验证了previos字符而导致的值不正确，该如何验证输入事件的正确性呢？

question.vue

<template>
    <div>
        <ValidationProvider v-slot="{ errors,passed }" name="question" rules="required|max:10000">
            <e-form-group :error="errors[0]">
                <template v-slot:label>
                    Question Text
                </template>
                <e-textarea
                    v-model="question"
                    name="question"
                    size="small"
                    @input="onInput($event,passed,name)"
                ></e-textarea>
            </e-form-group>
        </ValidationProvider>
        <ValidationProvider v-slot="{ errors,passed }" name="button" rules="required|max:10000">
            <e-form-group :error="errors[0]">
                <template v-slot:label>
                    Button Text
                </template>
                <e-textarea v-model="button" name="button" size="small" @input="onInput($event,name)"></e-textarea>
            </e-form-group>
        </ValidationProvider>
    </div>
</template>

<script>
export default {
    name: 'Question',props: {
        questionId: {
            type: Number
        }
    },data: () => ({
        question: '',button: '',}),methods: {
        onInput(event,valid,name) {
            console.log(event);
            console.log(valid);
            if (!valid) this.$emit({questionId: this.questionId,name: name})
        },},};
</script>

解决方法

默认值是已经对输入进行验证，因此您要做的是自己触发验证，获取结果然后发出事件：

    <ValidationProvider v-slot="{ errors,validate }" name="question" rules="required|max:10000">
        <e-form-group :error="errors[0]">
            <template v-slot:label>
                Question Text
            </template>
            <e-textarea
                v-model="question"
                name="question"
                size="small"
                @input="onInput($event,validate,name)"
            ></e-textarea>
        </e-form-group>
    </ValidationProvider>


methods: {
    onInput(event,name) {
        var self = this;
        validate(event).then(function(result) {
            if (result.valid) self.$emit({questionId: self.questionId,name: name})
        });
    },},