Vee-validate: Question about deeply nested validation

[Dylan-Chapman]

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.4

Description:

I'm using Vuetify's VTextField component. I have a wrapper component, say, CustomTextField that I use to apply a set of standard props to for all of my site's text fields (that is, I only use CustomTextField throughout my site).

Next, I have a component that wraps CustomTextField, call it CustomPasswordField, that uses CustomTextField, but also adds some convenience features like toggling the visibility of the password content.

I'm struggling to get validation to correctly read the value for validation. I can successfully validate CustomTextField, but not CustomPasswordField. Once validateAll runs, I can't get the CustomPasswordField to become validated, even when it has content entered.

Now, here's my question:
What would be the general VeeValidate setup for getting something like this to work? I'm using inject: false in my VeeValidate config. I've tried injecting VeeValidate and emitting input events from both wrapper components.

[logaretm]

Well you could find the component interface helpful #868, it is not documented yet, but I use it with similar use cases to yours. I think this will be the defacto way to use vee-validate with custom components in the future.

Basically you can use it to tell the validator how to extract the value from your component when it needs to, since by default it cannot tell until the input event is emitted.

If you can create a small fiddle I can update it to demonstrate it.

[Dylan-Chapman]

The component interface did the trick! I also got it working by, as you said, emitting the input event. I wasn't propagating the input event up through each of the wrapper components before. Thanks!

[andreasvirkus]

@logaretm when could we expect some documentation about the component interface? It seems
to be what I'm looking for, but am having some difficulty implementing it.

[logaretm]

@andreasvirkus Sadly I'm the only maintainer for this repository at baianat's open-source team (army of 3). Still I'm having some issues this year due to the mandatory army training which limits my availability greatly. Hopefully this will change once my teammates get more familiar with the code base and the design choices of the library

Currently there is a new design for the docs being worked at and the content would be reviewed before the new design is up. I cannot give an ETA unfortunately but I try to work on it every vacation I get (every one week).