How to validate on input event with vee validate 3

Question

I'm trying to make validation on input event, but the problem that when the event onInput fire in console.log(valid) - is not correct value because it validates the previos character, how to validate correcty on input event?

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

Answer 1

The default is to validate on input already, so what you want to do is trigger the validation yourself, get the result, and then emit your event:

    <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})
        });
    },
},