Vuetify form validate a custom component

Question

I got a custom date picker with a nested text-field, i would like to know if there's any way to validate my component on the function this.$refs.form.validate().

My Component:

<template>
    <v-menu
        v-model="dateMenu"
        :close-on-content-click="false"
        offset-y
        max-width="290"
    >
        <template v-slot:activator="{ on, attrs }">
            <v-text-field
                prepend-icon="mdi-calendar"
                :label="label"
                v-on="on"
                v-bind="attrs"
                v-model="dateFormatted"
                readonly
                clearable
                :rules="rules"
                :dense="dense"
            ></v-text-field>
        </template>
        <template default>
            <v-date-picker
                locale="es-AR"
                v-model="date"
                no-title
            ></v-date-picker>
        </template>
    </v-menu>
</template>

Omer Tal Omer Tal · Accepted Answer · 2021-01-25T22:40:30

It is a best practice to avoid using $ref as much as possible as it is manually accessing the DOM. You can read about it here.

I would suggest using you own code to access the data in the v-model and check your validation there, for an example:

// Template area
<v-text-field v-model="firstname" :rules="nameRules" label="First Name" required>
</v-text-field>

// Data area
firstname: '',
lastname: '',
nameRules: [
  v => !!v || 'Name is required',
  v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],

Vuetify form validate a custom component

1 Answers