如何让Vuetify日期选择器与输入框同步并实时更新？

• 方法一：调用组件内部更新方法（推荐）
  给日期选择器添加ref引用，在输入框的@input事件处理函数中，更新绑定的日期值后，手动调用组件的内部更新方法同步日历面板：

  Vue 2示例：

  <template>
    <v-date-picker
      v-model="selectedDate"
      ref="datePicker"
      persistent
    ></v-date-picker>
    <input
      v-model="inputDate"
      @input="handleInput"
    >
  </template>
  
  <script>
  export default {
    data() {
      return {
        selectedDate: null,
        inputDate: ''
      }
    },
    methods: {
      handleInput() {
        // 完成输入日期的格式校验与转换
        const validDate = this.formatInputDate(this.inputDate)
        if (validDate) {
          this.selectedDate = validDate
          // 同步更新日历面板
          this.$nextTick(() => {
            if (this.$refs.datePicker) {
              this.$refs.datePicker.internalValue = this.selectedDate
              this.$refs.datePicker.updatePicker()
            }
          })
        }
      },
      formatInputDate(dateStr) {
        // 实现日期格式转换逻辑，返回符合v-date-picker要求的格式（如'YYYY-MM-DD'）
      }
    }
  }
  </script>
  

  Vue 3 + Vuetify 3示例：

  <template>
    <v-date-picker
      v-model="selectedDate"
      ref="datePicker"
      persistent
    ></v-date-picker>
    <input
      v-model="inputDate"
      @input="handleInput"
    >
  </template>
  
  <script setup>
  import { ref, nextTick } from 'vue'
  const selectedDate = ref(null)
  const inputDate = ref('')
  const datePicker = ref(null)
  
  const handleInput = async () => {
    const validDate = formatInputDate(inputDate.value)
    if (validDate) {
      selectedDate.value = validDate
      await nextTick()
      if (datePicker.value) {
        datePicker.value.internalValue = selectedDate.value
        datePicker.value.updatePicker()
      }
    }
  }
  
  const formatInputDate = (dateStr) => {
    // 日期格式转换逻辑
  }
  </script>
  

• 方法二：强制组件重渲染
  给v-date-picker添加动态key，当日期更新时改变key值，触发组件重新渲染以同步新选中日期：

  <template>
    <v-date-picker
      v-model="selectedDate"
      :key="pickerKey"
      persistent
    ></v-date-picker>
    <input
      v-model="inputDate"
      @input="handleInput"
    >
  </template>
  
  <script>
  export default {
    data() {
      return {
        selectedDate: null,
        inputDate: '',
        pickerKey: 0
      }
    },
    methods: {
      handleInput() {
        const validDate = this.formatInputDate(this.inputDate)
        if (validDate) {
          this.selectedDate = validDate
          // 改变key触发重渲染
          this.pickerKey += 1
        }
      },
      formatInputDate(dateStr) {
        // 日期格式转换逻辑
      }
    }
  }
  </script>
  

注意：方法二属于强制重渲染，会重置组件的当前视图状态（比如当前显示的月份），如果需要保留日历的浏览位置，优先使用方法一。

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