Validate Child component Vue vee-validate Validate Child component Vue vee-validate vue.js vue.js

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