errorbag not working when using slots

Versions:

• VueJs: 2.5.17
• Vee-Validate: 2.1.0-beta.8

Description:

this.$validator.errors.any() or this.errors.any() (or all() ) are not showing any errors when custom input components are used in combination with a wrapper and slots. However, the input itself shows the error and in the vue devtools you can see that the errorbag in the parent contains errors (both directly and via the injected validator). This is probably not a bug, just a lack of understanding on my side of how the validator and inheritance works - obviously the data is traversing up the tree and I should be able to access them it in the parent, but using a wrapper with slots seems to be causing issues. Is there a trick to get vee-validate working with slots? I couldn’t find any working example for it.

Steps To Reproduce:

I have created a fiddle - you can simply test the different behaviour by removing the dialog wrapper in demo.vue https://codesandbox.io/s/23n91r2vry

[logaretm]

Sorry for taking a long time to address this issue, I suspect there is an issue in the automatic injection not prioritzing the inject API. I will investigate it and report back.

at the moment you can workaround the issue by disabling automatic injection all together and manage your nodes validators manually like this example:

https://codesandbox.io/s/j3vnlkm05w

The demo component is the parent of your input components, meaning we can safely assume its the validation provider and thus we inject a new validator instance in it to be the main validator to be inherited by your input components.

To add a new validator instance to a component you need to add $_veeValidate.validator to the component options:

{
  $_veeValidate: {
    validator: 'new' // get me a new validator
  },
}

You can read more about this topic here:

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

[wallslide]

I was having a similar issue. I had a view, with child components. Within one child component was a button I wanted disabled whenever there was an error somewhere in the text fields I was validating in separate components. The text fields that I was validating were in child components, which were passed via slots to wrapper components that were in the view.

In the view, I created a new validator instance with:

$_veeValidate: {
    validator: 'new' 
}

I injected the validator in the components containing the text fields that I was validating, and the component containing the button that I wanted to disable with:

inject: ['$validator']

I could see in the Vue.js devtools that my button component was getting an injected $validator, and that it had the fields and errors from my text fields. But when I used this.$validator.errors.any() it was always false. And when I used console.log to output this.$validator and checked its fields array there was nothing in there.

Turning off automatic validator injection fixed the issue immediately:

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

I’m using nuxt@2.3.4 and vee-validate@2.1.3