Validator is undefined when child is inside a slot
See original GitHub issueVersions:
- VueJs: 2.3.3
- Vee-Validate: master (fc88f2a65d4424fb985f391817b36a125d9d33e4)
Description:
$validator
is undefined when using inject: false
for child components that are inside a <slot> container
Steps To Reproduce:
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
vee-validate - Validating child component from parent
I'm using vee-validate 3.x I'd like to validate a form contained in a child component from the parent component.
Read more >Validation Provider - VeeValidate
The ValidationProvider component is a regular component that wraps your inputs and provides validation state using scoped slots . The slots syntax has...
Read more >Advanced usage - Vuelidate
Its sole purpose is to create Vuelidate instances and pass them to its parent, and children as scoped slot parameters. You can find...
Read more >Props - Vue.js
In these cases, you can list props as an object, where the properties' ... Basic type check (`null` and `undefined` values will pass...
Read more >Simple Vue.js Form Validation with Vuelidate
In this article, we'll be looking at how Vuelidate can be used to simplify: Validation; Multi-step form validation; Child component validation ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have found the issue here : https://github.com/logaretm/vee-validate/blob/master/src/mixin.js#L7-L11
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
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.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.