Validated a lazy load component when auto filling it with data

Question

I have a form on my vuejs app that has multiple stepper steps and each has their own validation to move on to the next step of the form. I have a special tool in my app though that will prefil in data for the form if they come from a certain route in my app but I have noticed for my dates that if they are prefilled with data then you must manually click on the date feel to get the v-date-picker to pop up then you can click off and it recognizes the validation for the fields and the next step of the v-stepper becomes available since all validation has come back as true. Here is what my dates looks like and my auto fill:

                          <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>

And I will auto fill it using a function that I run if I come from that certain route and it is this:

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

In case it helps my rule for this field is:

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

So is there a way I can autofill data but still use lazy load but not require my user to have to manually click on already prefilled dates because that defeats the purposes of autofilling data to make it easier for them.

Answer 1

The VTextField exposes its validation() function (see docs), just set a template ref and call the function through it:

<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>

Here is a playground with buttons for validation.