How to validate input that lives in a child component
- I have a form which is contains three q-inputs, each of which lives in a seprate child component (for reusability).
- Each input is using internal validation with a ‘required’ rule.
- Each input has a ref.
- One of the inputs has a popup proxy with a date picker
- The date picker validation does not fire if the field is empty. That is when validating the form via this.$refs.form.validate() the validation returns success, even though the date picker input does not have a value.
I am looking for a way to call validate() on the date picker input. I have tried this.$refs.refName.validate() but this return validate is not a function. Is this because it sits as a child component?
Note: I can focus the date picker input using this.$refs.dueDate.$el.focus()
Any help appreciated.
Solved. For those interested, this section of the Vue documentation provides the solution: https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements