Vuetify 表单验证自定义组件

Question

我有一个带有嵌套文本字段的自定义日期选择器，我想知道是否有任何方法可以在 this.$refs.form.validate() 函数上验证我的组件。

我的组件：

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

Answer 1

最好的做法是尽可能避免使用 $ref，因为它是手动访问 DOM。你可以阅读它here。

我建议使用您自己的代码来访问 v-model 中的数据并在那里检查您的验证，例如：

// 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',
],