Vee-validate: Add errors to error bag from parent components and listen from child components

[iamazik]

I couldn't find a guideline to implement this. So, writing here directly to the VeeValidate repository. How would you add error bag from the parent component and listen to the particular error bag from child components to show something conditionally?

I've added the errors to the error bag from the parent component like the following:

export default {
  mounted () {
    this.$validator.errors.add('critical', 'Unable to connect', 'network')
  }
}

Now, from the child component, I'd like to show something conditionally depending on the error bag whether there is an error or not. I've added my child component the following:

<a class="navbar-item" v-if="!errors.has('critical')">Hello World</a>

_Any idea about this?_

[logaretm]

You can make the child component use the it's parent validator using the inject API in Vue.js

http://vee-validate.logaretm.com/advanced#injection

// Child component requests the validator instance to be injected instead of a new instance.
export default {
  inject: ['$validator'],
  // ...
};

after the injection your parent and child component will both share the same errorBag and fields properties and have access to the same data.