Vee-validate: Validator is undefined when child is inside a slot

[Toilal]

Versions:

• VueJs: 2.3.3
• Vee-Validate: master (fc88f2a65d4424fb985f391817b36a125d9d33e4)

Description:

$validator is undefined when using inject: false for child components that are inside a container

Steps To Reproduce:

https://jsfiddle.net/Toilal/y46y3349/

[Toilal]

It seems injection works on the first child in the hierarchy, but doesn't work on deeper children.

[logaretm]

Shouldn't you also inject the validator on the items component, since the item component requests it, but its parent items doesn't provide it because it doesn't have its own instance for it.

https://jsfiddle.net/y46y3349/23/

[Toilal]

It would be possible in the JSFiddle, but in my real app, items component comes from a dependency so I can't add the injection code for it.

I think it should just traverse the component tree up until it finds a validator.

[Toilal]

I have found the issue here : https://github.com/logaretm/vee-validate/blob/master/src/mixin.js#L7-L11

  mixin.provide = function providesValidator() {
    return {
      $validator: this.$validator
    };
  };

Problem is that when this.$validator is undefined, it actually inject in the component with an undefined value.

It should be fixed with the following

  mixin.provide = function providesValidator() {
    if (this.$validator) {
      return {
          $validator: this.$validator
      };
    }
  };

Then, it behaves like manually provided value (dummy in the JSFiddle) and VueJS traverse the tree component up until in finds a $validator instance. I just tested this change in my app and it fix my issue.

[logaretm]

I see, I didn't take that into account. Thanks!