Vuetify v-time-picker: Issue selecting time zero (00) hour/Minute
ERROR:
[Vue warn]: Invalid event arguments: event validation failed for event "input".
[Vue warn]: Invalid event arguments: event validation failed for event "change".
[Vue warn]: Invalid event arguments: event validation failed for event "update:minute".
ISSUE:
I need to update my store with the time selected in the v-time-picker
component. However, when I select minutes or hours that include the digit zero (00), I encounter an error. As a result, the store is not updating correctly with the new time value.
For example, if I select 07:00, the store does not update. There is a strange behaviour in the component when clicking on the 00 digits. When I continue selecting or scrolling to the digit 00 (zero), at a certain point it finally registers the 00 digit and updates the store.
NOTE:
The error also appears in the official Vuetify documentation playground: Vuetify Time Pickers
CODE:
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useTimeStore } from '@/stores/register'
const { t } = useI18n()
const timeStore = useTimeStore()
const time = ref('')
const getCurrentTime = () => {
const now = new Date()
const hours = String(now.getHours()).padStart(2, '0')
const minutes = String(now.getMinutes()).padStart(2, '0')
return `${hours}:${minutes}`
}
const updateTime = (newTime: string) => {
console.log('1) updateTime:', newTime)
timeStore.setSelectedTime(newTime)
}
onMounted(() => {
const currentTime = getCurrentTime()
time.value = currentTime
timeStore.setSelectedTime(currentTime)
})
</script>
<template>
<v-responsive>
<v-row justify="space-around">
<v-time-picker
class="time-picker--container"
v-model="time"
format="24hr"
@update:modelValue="updateTime"
scrollable
:title="t('timePicker.title')"
></v-time-picker>
</v-row>
</v-responsive>
</template>
How can I resolve this issue to ensure the store updates correctly when select zero minutes/hour?