I have a v-data-picker that the selected value will fill in a v-text-field and display a cleaner formatted date that was chosen. The issue is I sometimes pre-populate this date from other aspects of my application. This is working great but when doing this programmatically the validation rule I have setup is not triggering the validation. If I manually select the date the validation triggers and if its valid my form can move to next step. My form is as follows:
<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>
My code which programmaticaly sets it is as follows:
const getEmailImportData = () => {
//state submission date
if(newReviewEmailData.value?.receive_date) {
stateSubmissionDateModel.value = dayjs(newReviewEmailData.value?.receive_date).toDate()
}
}