Vee-validate: v-if doesnt work so well, v-show works fine

Created on 4 Apr 2017 · 6Comments · Source: logaretm/vee-validate

Versions:

VueJs: 2.1.0
Vee-Validate: beta25

Description:

If I use v-if= to toggle the field, it works sometimes, but once the field comes and goes from existence, vee-validate seems to lose track of it and stop validating it.

If I use v-show= instead, all works well.

My guess is that v-if is removing from the DOM, and that is confusing vee-validate

Source

dannydulai

Most helpful comment

Okay I figured it, Vue actually reuses the input fields, meaning the directive never fired for the second input or whichever gets rendered the second time, which is an example of efficient rendering mechanism. so its not an issue with the plugin but a rather edge case of how the plugin integrates with the Vue rendering system.

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

The fix is simple, just add a unique key attributes to your inputs, Vue will then render them individually.

https://jsfiddle.net/oLtd0z1q/2/

logaretm on 1 May 2017

👍9

All 6 comments

Are you sure about the plugin version? beta.26 is not out yet.

and here is a working fiddle with v-if: https://jsfiddle.net/logaretm/bk6w74vd/

if it doesn't work for you it would be easier to reproduce it in a fiddle so I can identify the bug or the issue.

logaretm on 4 Apr 2017

https://jsfiddle.net/oLtd0z1q/1/

enter "foo", notice error. click hide, enter "foo", notice no error!

change the 2 v-if's to v-show, and the problem goes away.

removing the scopes and renaming the second field to email2 doesnt fix it, so this probably has nothing to do with scopes.

I did however fix it by doing this: changing the form's v-if to v-show, and adding v-if on the input's themselves

dannydulai on 5 Apr 2017

Additionally, if a field is v-if'd so its gone or v-show'd so its hidden, should it be skipped from validation? I'm having funny and maybe inconsistent results here.

Your post claims it does work: https://github.com/logaretm/vee-validate/issues/345#issuecomment-284473068

But I'm seeing v-if'd out fields showing up in the error bag

Also, I've updated my first post to be beta25 -- sorry for the typo

dannydulai on 6 Apr 2017

Well v-show is not the same as v-if like you noted, because v-if actually removes them from the DOM, triggering the detach which should remove it and its errors from the bag. Still I did not test the behavior with the removal of forms or parent elements as intensively with the elements themselves.

v-show just hides the element, it is more efficient than v-if for switching behaviors. so no inconsistency here as far as I can tell.

The issue is weird, probably a bug since the second email doesn't actually get created at all for some reason, the second scope didn't get created also. I will investigate and report back soon.

logaretm on 6 Apr 2017

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

The fix is simple, just add a unique key attributes to your inputs, Vue will then render them individually.

https://jsfiddle.net/oLtd0z1q/2/

logaretm on 1 May 2017

👍9

Okay I figured it, Vue actually reuses the input fields, meaning the directive never fired for the second input or whichever gets rendered the second time, which is an example of efficient rendering mechanism. so its not an issue with the plugin but a rather edge case of how the plugin integrates with the Vue rendering system.

https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

The fix is simple, just add a unique key attributes to your inputs, Vue will then render them individually.

https://jsfiddle.net/oLtd0z1q/2/

Well this doesnt work well in bulky forms either