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


    • 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:

Log in to reply