Accessing errors[] locks up inputs using :value

[bjunc]

Versions:

• VueJs: 2.2.1
• Vee-Validate: 2.0.0-beta.25

Description:

Accessing errors array in method or data prevents input value from updating. Not an issue if errors array is never accessed (although you need access to this array to present errors). Also not an issue if you use v-model instead of :value (in my situation, not desirable).

Steps To Reproduce:

1. Create <input v-validate="'required'" name="somefieldname" :value="someprop" />
2. Access errors array in a method or data: this.errors.errors or this.$validator.errorBag.errors
3. Attempt to change the value of the input field through user interaction (typing).

This happens if error object methods are accessed as well (eg. errors.any() or errors.has()).

[logaretm]

The problem does not lie within the error object, It lies within the update cycle, when errors mutate, the UI updates which reverts the value to the initial value, I'm not sure how am I going to fix this, I will have to read more about Vue's update cycle.

For example you can get a similar bug if you build your own simple validator:

https://jsfiddle.net/logaretm/g0xjq2nk/11/

[bjunc]

That explains why it's not an issue with v-model since the changes made in the <input/> are actually changing the property value.

The workaround for me was to _.clone() the props I was validating, use v-model on the form inputs, and then _.assign() them back to the original props upon valid form submit.

[Little-Little-Monster]

How to fixed this Bug?

[logaretm]

@Little-Little-Monster

I hit a brick wall trying to fix this, the only valid solution is to use v-model since it will give you the desired behavior. also it is not related to the plugin, it is related to how Vue handles things. Like I pointed out before you can cause the same issue without any plugins by just updating the component template by modifying any bound values.

also take a look at this issue: vuejs/vue#3924