以编程方式预填充v-date-picker时的验证触发问题

使用v-date-picker组件时遇到以下情况：

• 手动选择日期后，值会填充到v-text-field并显示规整格式，配置的表单验证规则能正常触发，验证通过后表单才可进入下一步。
• 通过应用其他模块以编程方式预填充日期时，验证规则不会触发。

相关代码 #

表单代码 #

<v-form v-model="additionalDetailsValid" @submit.prevent>
  <v-card
    flat
    class="pt-5"
  >
    <v-menu v-model="stateSubmissionDateMenu"
          :close-on-content-click="false"
          transition="scale-transition"
          offset-y
          max-width="290px"
          min-width="auto">
      <template v-slot:activator="{ props }">
        <v-text-field
          color="primary"
          v-bind="props"
          label="State Submission Date"
          :model-value="formatDate(stateSubmissionDateModel,'MM/DD/YYYY')?.toString()"
          prepend-inner-icon="mdi-calendar"
          :rules="objectRequiredRule"
          validate-on="lazy input"
          readonly
          variant="outlined"/>
      </template>
      <v-date-picker 
        v-model="stateSubmissionDateModel"
        color="primary"
        no-title
        :max="new Date()"
        @update:modelValue="stateSubmissionDateMenu = false"></v-date-picker>
    </v-menu>    
  </v-card>
</v-form>

编程设置日期的代码 #

const getEmailImportData = () => {
  //state submission date
  if(newReviewEmailData.value?.receive_date) {
    stateSubmissionDateModel.value = dayjs(newReviewEmailData.value?.receive_date).toDate()
  }   
}

原因 #

v-text-field的validate-on="lazy input"仅监听用户手动输入事件，编程式修改model-value不会触发这类事件，因此验证规则不会自动执行，表单的整体验证状态也不会更新。

解决方法 #

1. 手动触发单个字段验证 #

给v-text-field添加ref，在编程赋值后调用字段的validate()方法：

• 修改v-text-field：

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

• 修改编程赋值代码：

const getEmailImportData = () => {
  if(newReviewEmailData.value?.receive_date) {
    stateSubmissionDateModel.value = dayjs(newReviewEmailData.value?.receive_date).toDate()
    // 手动触发字段验证
    dateTextField.value.validate()
  }   
}

2. 更新表单整体验证状态 #

如果需要同步更新整个表单的验证状态，给v-form也添加ref，并调用表单的validate()方法：

• 修改v-form：

<v-form v-model="additionalDetailsValid" @submit.prevent ref="additionalDetailsForm"> <!-- 添加ref -->

• 修改编程赋值代码：

const getEmailImportData = () => {
  if(newReviewEmailData.value?.receive_date) {
    stateSubmissionDateModel.value = dayjs(newReviewEmailData.value?.receive_date).toDate()
    // 先验证单个字段，再更新表单状态
    dateTextField.value.validate()
    additionalDetailsForm.value.validate()
  }   
}

3. 调整验证触发时机（可选） #

将v-text-field的validate-on属性改为"lazy input change"，这样当model-value变化时也会触发验证。不过对于readonly字段，可能需要结合手动触发来确保验证生效：

<v-text-field
  <!-- 其他属性不变 -->
  validate-on="lazy input change"
/>

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