Vee-validate: v-if revealed form inputs don't validate
Versions:
- VueJs: 2.5.1
- Vee-Validate: latest
Description:
On a multi step form with hidden elements using v-if, the form elements that appear after the initial page load don't seem to be validating even though the DOM shows data-vv-id. No rules are being triggered. And in the vue console it's not showing the fields that are hidden on load.
pretty
All 4 comments
Do you mind creating a demo for the issue?
logaretm
on 1 Nov 2017
Uploading a quick screencast for speed as I'm in the zone right now :) , link will expire for security.
http://drop.subbly.co/0w2U1n442w15
Video is now uploaded and expires in a day @logaretm
pretty
on 1 Nov 2017
This is a small gotcha in Vue.js, well at least with vee-validate. The issue is Vue reuses the input element to be more efficient. You can read more about it here:
https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key
You can fix it easily by adding key attribute on your inputs with different values to disable this behavior.
Here is a simplified example with the fixed behavior:
https://jsfiddle.net/logaretm/sxemf8g1/
Will be happy to reopnen if this is not the case.
P.S: nice background music 😄
logaretm
on 1 Nov 2017
Bingo! That worked thank you 😄 !
And thanks hahaha
pretty
on 1 Nov 2017
Related issues
saintplay
·
3Comments
Hoagiex
·
3Comments
Etheryte
·
3Comments
Shchepotin
·
3Comments
yyyuuu777
·
3Comments
Most helpful comment
This is a small gotcha in Vue.js, well at least with
vee-validate. The issue is Vue reuses the input element to be more efficient. You can read more about it here:https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key
You can fix it easily by adding
keyattribute on your inputs with different values to disable this behavior.Here is a simplified example with the fixed behavior:
https://jsfiddle.net/logaretm/sxemf8g1/
Will be happy to reopnen if this is not the case.
P.S: nice background music 😄