Vuetify 2日期选择器无法更新DOM中的日期

看起来你遇到的问题是选完日期后，页面上的日期文本完全没跟着更新对吧？我帮你分析下可能的原因和对应的解决办法：

首先看你代码里的几个关键问题点：

1. 你同时给v-menu绑定了:return-value.sync="date"，又给v-date-picker绑定了v-model="date"，这两个绑定会产生冲突，导致date的值更新异常，DOM自然就不会同步变化。
2. 直接在模板里写new Date(date).toLocaleDateString(...)虽然语法没问题，但如果date的响应式处理不到位，或者初始值设置不合理，也容易触发更新失效的问题。

下面是具体的修复步骤：

1. 消除绑定冲突 #

把v-menu上的:return-value.sync="date"去掉就好，v-date-picker的v-model已经足够直接更新date的值，不需要菜单再同步返回值。修改后的菜单代码：

<v-menu
    ref="menu"
    v-model="menu"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    min-width="auto"
>

2. 确保date的响应式与初始值 #

在组件的script部分，要保证date是响应式的，并且初始值是Vuetify日期选择器支持的字符串格式（比如'2024-05-20'）：

export default {
  data() {
    return {
      menu: false,
      // 初始值设为当前日期的标准字符串格式
      date: new Date().toISOString().split('T')[0]
    }
  }
}

3. 优化日期格式化逻辑 #

建议把日期格式化的逻辑放到计算属性里，既避免在模板里重复创建Date实例，也让代码更易维护：

export default {
  data() {
    return {
      menu: false,
      date: new Date().toISOString().split('T')[0]
    }
  },
  computed: {
    formattedDate() {
      if (!this.date) return ''
      // 注意你原来的'esp'应该是'es'（西班牙语的正确代码）
      return new Date(this.date).toLocaleDateString('es', { 
        weekday: 'short', 
        day: 'numeric', 
        month: 'short', 
        year: 'numeric' 
      }).toLocaleUpperCase()
    }
  }
}

然后模板里直接调用这个计算属性：

<template>
    <div>
        {{ formattedDate }}
        <v-menu
            ref="menu"
            v-model="menu"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
            min-width="auto"
        >
            <template v-slot:activator="{ on, attrs }">
                <v-btn plain v-bind="attrs" v-on="on">
                    选择日期
                </v-btn>
            </template> 
            <v-date-picker
                v-model="date"
                first-day-of-week="1" <!-- 修正你代码里的拼写错误 -->
                @input="menu = false" <!-- 选完日期后自动关闭菜单，提升体验 -->
            ></v-date-picker>
        </v-menu>
    </div>
</template>

额外小提示 #

你代码里的firs...应该是first-day-of-week的拼写错误，记得修正成正确的属性名哦。

备注：内容来源于stack exchange，提问作者pol