验证表单验证自定义组件

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