How to validate input that lives in a child component



  • Setup

    • 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

    Issue

    • 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


Log in to reply