Validate child input components on submit with Vee-Validate

Question

I\'m currently trying to create a Registration form with multiple \"Input Field\" components which all require validating once Submit has been pressed. They all currently va

Answer 1

In my case what I do is that I that I disable vee-validate injection:

Vue.use(VeeValidate, { inject: false });

This will make the plugin stop instantiating a new validator scope for each component instance, excluding the root instance.

And in the parent component i get a new validator instance which i'll share with the desired childs:

export default {
  $_veeValidate: {
      validator: 'new' // Determines how the component get its validator instance
                       // 'new' means it will always instantiate its own validator instance
  },
  ......

In the child component i inject that parent's validator instance:

export default {
    // This will make the component inherit it's parent's validator scope,
    // thus sharing all errors and validation state. Meaning it has access
    // to the same errors and fields computed properties as well.
    inject: ['$validator'],
    ...........

Resource: https://baianat.github.io/vee-validate/concepts/components.html