Vuetify 3 的 v-date-input 如何监听日期值更新？

2026-11-04数据小陈

应监听哪个事件？

直接监听 v-date-input 的 @update:modelValue，即可获取组件提交的新日期值，不必在内部的 v-text-field 上绑定事件。

Vue 3 组件的默认 v-model 对应 modelValue 属性和 update:modelValue 事件，Vuetify 的 VDateInput 也声明了这个更新事件。参考 Vue 组件 v-model 文档和 Vuetify VDateInput 源码。

原代码中这一行有误：

- @update.modelValue="input"

事件名应使用冒号 :，而不是点号 .。在 v-on 中，点号用于修饰符，不能代替事件名中的冒号；行首多余的 - 也要删掉。改为：

@update:modelValue="input"

最小修改示例

以下示例沿用原来的日期初始化方式，并假设项目已注册 v-date-input。先省略只读、格式和年份限制配置，确认日期更新监听是否正常：

<template>
  <div class="d-flex justify-center">
    <v-date-input
      v-model="model"
      max-width="368"
      prefix="Wind Date:"
      @update:modelValue="onDateUpdate"
    />
  </div>
</template>

<script setup>
import { shallowRef } from 'vue'
import { useDate } from 'vuetify'

const adapter = useDate()
const model = shallowRef(adapter.parseISO('2018-02-20'))

function onDateUpdate(value) {
  console.log('日期值已更新：', value)
}
</script>

这里的 value 是组件发出的模型值，不是原生 DOM 事件，因此不需要读取 value.target.value。业务处理时直接使用回调参数即可，具体类型需结合日期适配器和组件配置判断。

为什么其他监听方式不适合？

@click 表示点击行为。点击输入框或打开日期面板时，日期值未必发生变化。
@submit 用于提交行为，不能作为日期值更新的通用通知。
v-on:input 监听名为 input 的事件，与组件的 update:modelValue 不同。
@update 和 @selected 也不是 update:modelValue 的别名。

原代码中 click、selected 和 submit 都打印了 submit called。排查时可为它们使用不同的日志，避免混淆。

修正后仍未触发时，检查什么？

先检查只读配置。原代码使用了 readOnly="true"。如果需要只读，应使用组件声明的 readonly 属性，例如 :readonly="true"；测试日期修改时则应先移除该配置。Vuetify 3.9.0 的实现中，readonly 会影响组件的可交互状态，不能假定它只禁止键盘输入，仍允许选择日期。对应源码

模型更新也不意味着每次按键都会触发事件。手动输入通常需要先完成解析，再到达组件规定的更新时机；日期面板也可能受确认操作配置影响。具体行为应以项目安装版本的 VDateInput API 为准，原问题没有提供足以确定这些行为的版本信息。

确认最小示例有效后，再逐项恢复 input-format 和 allowed-years，核对当前版本是否支持这些属性及其参数格式。

如果还要监听代码修改日期

如果需求包括其他业务代码对 model.value 的赋值，可以在同一个 <script setup> 中使用 watch：

import { watch } from 'vue'

watch(model, (newValue, oldValue) => {
  console.log('日期模型变化：', oldValue, '→', newValue)
})

watch 观察模型变化，无法单凭这次变化判断是否由用户操作引起。如果只处理组件发出的更新，保留 @update:modelValue 即可；两处同时执行相同的业务逻辑可能造成重复处理。