在自动填充数据时验证延迟加载组件

Question

我的 vuejs 应用程序上有一个表单，它有多个步进器步骤，每个步骤都有自己的验证以进入表单的下一步。我的应用程序中有一个特殊的工具，尽管如果它们来自我的应用程序中的某个路径，它将预填充表单的数据，但我注意到我的日期，如果它们预填充了数据，那么您必须手动单击日期感觉要弹出 v-date-picker，然后您可以单击关闭，它会识别字段的验证，并且 v-stepper 的下一步变得可用，因为所有验证都已返回 true。这是我的日期和自动填充的样子：

                          <v-menu v-model="ratingPeriodBeginMenu"
                              :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="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"/>
                          </template>
                          <v-date-picker 
                            v-model="ratingPeriodBeginModel"
                            :max="ratingPeriodEndModel"
                            color="primary"
                            no-title
                            @update:modelValue="ratingPeriodBeginMenu = false"></v-date-picker>
                      </v-menu>

如果我来自该特定路线，我将使用我运行的函数自动填充它，它是：

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

如果它有助于我在这个领域的规则是：

  const objectRequiredRule = [  (value: string) => !!value || 'Required.', ]

有没有一种方法可以自动填充数据，但仍然使用延迟加载，但不要求我的用户必须手动单击已经预填充的日期，因为这违背了自动填充数据的目的，使他们更容易。

Answer 1

VTextField 公开其

validation()

函数（请参阅 docs），只需设置模板引用并通过它调用该函数即可：

<template>
  <v-text-field
    :model-value="foo"
    ref="fooFieldRef"
    validate-on="lazy"
  />
</template>
<script setup>
  import { ref, onMounted } from 'vue'

  const foo = ref()
  const fooFieldRef = ref()

  onMounted(() => {
    foo.value = new Date('2025-01-22')
    fooFieldRef.value?.validate() // <--- validate() is async
      .then(errorsMsgs => console.log('foo is valid:', errorsMsgs.length === 0))
  })  
</script>

这里是一个带有验证按钮的游乐场。