Vee-Validate & Vuetify validation of :value bound inputs

[aZilberstein]

Versions:

• VueJs: 2.5.2
• Vee-Validate: 2.0.6

Description:

I just love using vee-validate in my projects, however when I try to "befriend" it with some of the popular Vue component libraries I run into some major issues... Like this one: when I set a v-validate="'min:3'" or anything on a Vuetify component it works with a huge delay and only on blur event IF the input's value isn't bound by v-model, but by :value. The case for this is common, say I have my fields' values stored in Vuex, but I still want to be able to validate them timely. Say I enter 2 letters of my name into the input: 'An', and it won't get validated until I focus out. Then I input 2 more letters and still see the error. Blur on the input - and its validated then.

Steps To Reproduce:

https://codepen.io/azilberstein/pen/zjqLaw

Try entering 2 letters first and then focusing out. Then 1 more letter (till there are 3) and focus out. Then wipe 2 letters until 1 letter remains. Then try the same procedure on the second field, that has a v-model bound value...

I really count on your help because I don't want to resort to the ":rules" practice offered by Vuetify... Thanks in advance!

[logaretm]

Hello there, sorry for the late response.

I will try to explain the issue: When you add @input listener it adds an event listener but so does vee-validate when an input event is triggered both listeners run. But the value hasn't been updated internally yet since you actually set it in the listener.

You can resolve the issue in two ways, either by telling the directive to watch the name model via directive args:

v-validate:name="'min:3'"

https://codepen.io/anon/pen/VxPvJp

or by using setters on computed properties which is better for vuex states in my opinion:

https://codepen.io/anon/pen/YLNwKQ

I just also added an example for it:

https://baianat.github.io/vee-validate/examples/vuex.html