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

【问题标题】：How to validate on input event with vee validate 3如何使用 vee validate 3 验证输入事件
【发布时间】：2020-10-13 13:42:21
【问题描述】：

我正在尝试对输入事件进行验证，但是当console.log(valid) 中的onInput 事件触发时的问题是不正确的值，因为它验证了previos 字符，如何验证输入事件的正确性？

问题.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, passed, 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>

【问题讨论】：

标签： vue.js vee-validate

【解决方案1】：

默认是对输入进行验证，所以你要做的是自己触发验证，获取结果，然后发出你的事件：

    <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, validate, name) {
        var self = this;
        validate(event).then(function(result) {
            if (result.valid) self.$emit({questionId: self.questionId, name: name})
        });
    },
},

【讨论】：