Validate Child component Vue vee-validate
I found solution with this code. In my parent component i add provide and i send the $validator
export default { components:{ ... }, provide() { return { $validator: this.$validator, } },
In my child component i received this
inject: ['$validator'],
In my parent component i add this method to invoque validation
methods:{ save_progrees(){ var validationArray = this.$children.map(function(child){ return child.$validator.validateAll(); }); window.Promise.all(validationArray).then((v) => { v.some( element => { if ( element == false ) { throw "exists error in child component";} }); this.error_in_form_save_progress = false; alert("datos guardados"); return }).catch(() => { this.show_message_error_validation(); }); }, show_message_error_validation(){ this.error_in_form_save_progress = true; } }
Finally to show error in component info-error I use this code
<template> <div class="row" v-if="errors.items"> <div class="col-md-12"> <template v-for="(e,key) in errors.items" > <div class="text-danger" v-if="e.field ==name_field" :key="key"> {{e.msg}} </div> </template> </div> </div></template>
In your child component do watch for this.errors and in the watch, put this.$emitSomething like this below :
watch: { errors: function (value) { this.$emit('TextComponent', value) }}
And then catch it on your parent component see it here https://vuejs.org/v2/api/#vm-emit