Vue表单预填日期后懒加载验证失效问题求助

问题核心是：你用了validate-on="lazy input"，这个配置只有用户手动触发input事件时才会执行验证，但预填日期是程序层面更新数据，不会触发该事件，所以验证没执行，导致步骤处于锁定状态。

下面是两种符合你需求（保留懒加载验证）的解决方案：

方案一：手动调用字段的验证方法 #

给日期输入框添加ref，预填完成后直接调用它的validate()方法强制触发验证：

1. 修改模板，给<v-text-field>添加ref：

<v-text-field
  ref="beginDateField" <!-- 添加这行 -->
  color="primary"
  v-bind="props"
  label="Rating Period Begin Date"
  :model-value="formatDate(ratingPeriodBeginModel,'MM/DD/YYYY')?.toString()"
  prepend-inner-icon="mdi-calendar"
  :rules="objectRequiredRule"
  validate-on="lazy input"
  readonly
  variant="outlined"/>

2. 在脚本里监听日期模型变化，触发验证：

import { ref, watch } from 'vue'

// 声明ref关联输入框
const beginDateField = ref(null)
const ratingPeriodBeginModel = ref(null)

// 预填日期逻辑
ratingPeriodBeginModel.value = dayjs(rateSubmission?.form_data.rate_date_start).toDate()

// 监听日期模型变化，立即触发验证
watch(ratingPeriodBeginModel, (newDate) => {
  if (newDate && beginDateField.value) {
    beginDateField.value.validate()
  }
}, { immediate: true })

方案二：手动派发input事件 #

既然validate-on="lazy input"只响应input事件，那我们可以在预填完成后手动给输入框派发这个事件，模拟用户输入的触发逻辑：

1. 同样给<v-text-field>添加ref（同上）

2. 修改监听逻辑，派发input事件：

import { ref, watch } from 'vue'

const beginDateField = ref(null)
const ratingPeriodBeginModel = ref(null)

ratingPeriodBeginModel.value = dayjs(rateSubmission?.form_data.rate_date_start).toDate()

watch(ratingPeriodBeginModel, (newDate) => {
  if (newDate && beginDateField.value) {
    // 格式化日期后派发input事件
    const formattedVal = formatDate(newDate, 'MM/DD/YYYY')?.toString()
    beginDateField.value.$emit('input', formattedVal)
  }
}, { immediate: true })

这两种方法都不会改动你原来的lazy input验证逻辑，只是在预填时主动触发验证流程，满足你的需求。

内容的提问来源于stack exchange，提问作者Qiuzman