有没有办法在用户与元素交互之前阻止 Vue 规则验证？答案

【问题标题】：Is there a way to prevent Vue rules from validating before a user interacts with an element?有没有办法在用户与元素交互之前阻止 Vue 规则验证？
【发布时间】：2022-08-19 02:19:06
【问题描述】：

我在我正在构建的项目中使用v-date-picker，其中用户选择出发日期和返回日期。我在输入字段上的大多数其他规则在用户与其交互之前不会生效，但是出发日期选择器在页面加载时显示“请选择一个日期”，而返回日期选择器不显示任何完全错误，无论我选择什么日期。

日期选择器代码：

<v-row>
    <v-col cols=\"auto\" sm=\"6\">
        <v-menu v-model=\"departPicker\" :close-on-content-click=\"false\" transition=\"scale-transition\" offset-y min-width=\"auto\" >
            <template v-slot:activator=\"{ on, attrs }\">
                <v-card-text style=\"padding: 0px;\">Departure Date</v-card-text>
                        <v-text-field dense outlined readonly v-bind=\"attrs\" v-on=\"on\" v-model=\"genInfoObject.departureDate\" :rules=\"departureDateRules\"/>
            </template>
            <v-date-picker v-model=\"genInfoObject.departureDate\"/>
        </v-menu>
    </v-col>

    <v-col cols=\"auto\" sm=\"6\">
        <v-menu v-model=\"returnPicker\" :close-on-content-click=\"false\" transition=\"scale-transition\" offset-y min-width=\"auto\">
            <template v-slot:activator=\"{ on, attrs }\">
                <v-card-text style=\"padding: 0px;\">Return Date</v-card-text>
                    <v-text-field dense outlined readonly v-bind=\"attrs\" v-on=\"on\" v-model=\"genInfoObject.returnDate\" :rules=\"returnDateRules\"/>
            </template>
            <v-date-picker v-model=\"genInfoObject.returnDate\" />
        </v-menu>
    </v-col>
</v-row>

规则代码：

departureDateRules: [
    v => !!v || \'Departure date is required\',
    v => v >= new Date().toISOString().slice(0, 10) || \"Departure date can\'t be prior to today\'s date\"
],
returnDateRules: [
    v => !!v || \'Return date is required\',
    v => v >= new Date().toISOString().slice(0, 10) || \"Return date can\'t be prior to today\'s date\",
    v => v <= this.genInfoObject.departureDate || \"Return date can\'t be before departure date\",
],

departPicker: false,
returnPicker: false

标签： javascript vue.js vuetify.js

【解决方案1】：

通常，当您将 lazy-validation 属性设置为您的 v-form 时，您会实现这一点。如果您在页面加载中修改日期选择器值，可能会触发规则验证。

解决此问题的另一种方法是在初始化任何数据后，在 mount 或 created 钩子上调用表单的 this.$refs.yourRefName.resetValidation()。

【讨论】：