Vee-validate: ValidationProvider for nested components

[talberkoSB]

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?

[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.

[Rhysjc]

It seems like if the v-model component is in a slot, the ValidationProvider doesn't work. A quick example:

Component A:

<template>
  <div>
    <slot />
  </div>
</template>

Component B:

<template>
  <validation-provider rules="required" v-slot="{ flags }">
    {{ flags.invalid }}
    <component-a>
      <input type="text" v-model="data" />
    </component-a>
  </validation-provider>
</template>

The invalid flag doesn't change regardless of input. These may be unrelated but they seem quite similar.

[talberkoSB]

@logaretm is right. The problem was that my CustomInput didn't have the v-model implementation.
I implemented it and now it works.

My only problem now is with a CustomRadio component, which I implemented it's v-model but the provider (with required role) still seems valid even if the radio value is undefined. The more interesting thing, is that the observer shows gets updated with the invalid state.

[Rhysjc]

Ah damn, glad to hear you got it sorted though. @logaretm Shall I submit a separate issue for the slots thing?

[logaretm]

@Rhysjc I tried the v-model in slot and it worked on my end, feel free to open another issue, would appreciate a demo it using codesandbox or any other tool.

@talberkoSB Can you provide a sample of that component in an example? you can use codesandbox to demo it.

[Fanarito]

I ran into the same issue. For some reason validation does not work on explicit slots.

This would not work

<validation-provider>
  <card>
    <template v-slot:default>
        ...some component with v-model
    </template>
  </card>
</validation-provider>

But this would

<validation-provider>
  <card>
      ...some component with v-model
  </card>
</validation-provider>

No clue why though.

[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 ?