Enhancements
- Validation Components are now renderless
Both ValidationProvider and ValidationObserver components are now renderless, meaning they do not render anything by themselves, previously they rendered a span tag. This was causing consistency issues on SSR rendered environments like Nuxt in some cases.
This enforces the validation components slot to have only a single root element, meaning
<ValidationProvider>
<template slot-scope="ctx">
<input v-model="something">
<span>{{ ctx.errors[0] }}</span>
</template>
</ValidationProvider>Is no longer a valid slot, because it renders both input and span tags since template isn't rendered. You can fix it simply by swapping the template tag with any other tag or a vue component.
<ValidationProvider>
<div slot-scope="ctx">
<input v-model="something">
<span>{{ ctx.errors[0] }}</span>
</div >
</ValidationProvider>This will ensure better consistency in SSR environments, and being renderless makes those components rendered output match more with their role as a wrapper/utility components.
Bugs Fixed
- Trigger initial validation after the next tick closes #1683