Is your feature request related to a problem? Please describe.
Sometimes it would be useful if ValidationProvider emitted events when, i.e. validation state has changed or the field has been touched, etc. Scoped slots are nice but they can be accessed only in template inside ValidationProvider. Right now it is not possible to react for validation state changes in JavaScript.
As an example - I want to do some action when the validation state of the field changes from 'valid' to 'invalid'. How can I achieve that? In Vue.js it would be great if I could set watchers on scoped slots, but Vue does not offer such a capability.
Here someone had samilar problem as me (also with vee-validate library):
https://forum.vuejs.org/t/watch-slot-props/63228/4
Describe the solution you'd like
Add an OPTIONAL prop/props for the ValidationProvider which will turn on emitting events.
Example events:
and maybe more
Additional context
By default ValidationProvider should not emit any event. Emitting events should be turned on for a specific instance of ValidationProvider or globally for all ValidationProviders.
For anyone curious on how you can emit an event from ValidationProvider here's a basic example, using $refs.validator as the wrapped provider.
export default {
components: {
ValidationProvider
},
mounted() {
this.$watch(() => {
return this.$refs.provider.errors;
}, (val) => {
if (val && val.length !== 0) {
this.$emit('invalid');
} else {
this.$emit('valid');
}
});
},
}
I'd like to add that for me it would be preferable to have these kind of events not optional but enabled by default.
Most helpful comment
For anyone curious on how you can emit an event from
ValidationProviderhere's a basic example, using$refs.validatoras the wrapped provider.I'd like to add that for me it would be preferable to have these kind of events not optional but enabled by default.