ValidationProvider for nested components

Hi I have a component, named CustomInput, which is kind of a big switch case by types, and accordingly renders the relevant field.

I want to wrap it with ValidationProvider. The problem is that the ValidationProvider works only if the rendered input is a direct child and not a nested one.

Working scenario: ValidationProvider rules=“required” -> template slot-scope -> input[type=text]

Not working: ValidationProvider rules=“required” -> template slot-scope -> CustomInputText -> input[type=text]

Any idea why it happens?

[Drenskin]

Hello,

I’ve forked and updated your code to demonstrate the issue : https://codesandbox.io/s/vue-template-xw2sl

I have just added <template v-slot:default="slotProps"> around the input to demonstrate that Vee-Validate fails to find the input to validate.

I have the same issue with VeeValidate 3.3.2.

Could you have a look please ?

[logaretm]

I can’t help you much without a working sample, but I have a few guesses:

• Your CustomInput does not use v-model which is a requirement, otherwise, you need to work with the Provider API manually.
• Your CustomInput does not emit any events like input.