Vuetify3中v-date-input组件日期选择事件监听问题求助

你的代码存在几个关键问题导致事件处理器无法正常触发，以下是针对性的修复方案：

问题根源 #

1. 语法错误：模板中 - @update.modelValue="input" 属于无效代码，既包含多余的 - 符号，且正确的事件名应为 @update:modelValue（使用冒号而非点连接）。
2. 脚本作用域冲突：混合使用 <script setup> 和传统选项式API的 <script> 块，导致选项式API里定义的 methods 无法被模板访问。
3. 错误事件绑定：v-date-input 不支持 @submit 和 @selected 事件，@click 仅在点击组件本身时触发，并非监听日期选择的正确方式。

修复后的完整代码 #

<template>
  <div class="d-flex justify-center">
    <v-date-input
      v-model="model"
      input-format="dd-mm-yyyy"
      max-width="368"
      prefix="Wind Date:"
      readOnly="true"
      :allowed-years="[2018]"
      @update:modelValue="handleDateChange"
      @click="handleComponentClick"
    ></v-date-input>
  </div>
</template>

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

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

// 监听日期选择变更
const handleDateChange = (newDate) => {
  console.log('日期已更新:', newDate)
}

// 监听组件点击事件
const handleComponentClick = () => {
  console.log('组件被点击')
}

// 可选方案：通过watch监听model变化
watch(model, (newVal) => {
  console.log('watch检测到日期变化:', newVal)
})
</script>

核心说明 #

• @update:modelValue：这是Vue监听 v-model 变化的标准事件，用户选择新日期时会自动触发，参数为最新的日期值。
• 统一使用script setup：将所有逻辑放在 <script setup> 中，确保模板能直接访问定义的方法和变量。
• readOnly属性：设置为 true 仅禁用文本框手动输入，不影响弹出日期选择器的操作，也不会阻止 @update:modelValue 事件触发。

内容的提问来源于stack exchange，提问作者Dave