Error after form resetting vee validate 3

Question

I am using vee-validate 3.1.1 and vue 2.5.17.

After successful form submission I am resetting the input

this.name = ''

But validation error message shows after resetting the input like the below image

There was same problem in vee-validate 2.* I had solved that with this code

this.$nextTick(() => {
    this.errors.clear();
})  

Answer 1

//first reset your form values
this.name = '';
//then do this to reset your ValidationObserver
this.$nextTick(() => this.$refs.observer.reset());

This requires that you have your form inputs wrapped in a ValidationObserver with the attribute ref="observer". Otherwise, you'd want to call the reset method of each ValidationProvider you use, inside that same callback.

See here for the examples they give for vee-validate. The "Resetting Forms" covers what you are doing, and the next example shows what I'm talking about ("Programmatic Access with $refs").

Answer 2

Following the Vee-validate 3 documentations it is recommended to reset the form after the animation frames are requested.

You could do something like this:

methods: {
    async reset() {
       this.name = '';
       requestAnimationFrame(() => {
          this.$refs.observer.reset();
       );
    }
}