Vuetify循环日期选择器如何将日期格式化为DD-MM-YYYY？

你的代码存在几个关键错误，导致日期格式显示异常，以下是修复方案：

原代码问题点 #

• mounted是函数而非对象，你写成了mounted: {}，导致初始化逻辑完全不执行
• v-date-picker的v-model绑定错误，应该绑定当前循环项的shareholder.origDate，而非shareholders.origDate
• 未在data中定义modals数组，菜单的显示状态无法正常控制
• 日期选择器的return-value.sync绑定格式化后的日期，会和组件本身仅识别YYYY-MM-DD格式的特性冲突

修复后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-container>
      <div v-for="(shareholder, i) in shareholders" :key="i">
        <v-menu
          :ref="'dob'"
          v-model="modals[i]"
          close-on-content-click="false"
          transition="scale-transition"
          offset-y
        >
          <template v-slot:activator="{ on, attrs }">
            <v-text-field
              :value="formatDate(shareholder.dateOfBirth)"
              v-bind="attrs"
              v-on="on"
              readonly
            ></v-text-field>
          </template>
          <v-date-picker
            v-model="shareholder.dateOfBirth"
            @input="modals[i] = false"
            first-day-of-week="1"
          ></v-date-picker>
        </v-menu>
      </div>
    </v-container>
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      shareholders: [
        {dateOfBirth: '2011-04-12'},
        {dateOfBirth: '2023-02-10'}
      ],
      modals: [] // 初始化菜单状态数组
    }
  },
  mounted() {
    // 为每个日期选择器菜单初始化状态
    this.modals = this.shareholders.map(() => false)
  },
  methods: {
    formatDate(date) {
      if (!date) return null
      const [year, month, day] = date.split('-')
      return `${day}-${month}-${year}`
    }
  }
})
</script>

关键修改说明 #

1. 修正mounted写法：改成函数形式，初始化modals数组，确保每个菜单有独立的显示状态
2. 分离显示与绑定值：文本框用:value绑定格式化后的日期，避免和日期选择器要求的YYYY-MM-DD原始格式冲突
3. 简化选择逻辑：直接将日期选择器绑定到原始的shareholder.dateOfBirth，选择完成后关闭菜单即可，无需额外维护origDate字段
4. 补充Vuetify依赖：原代码缺少Vuetify的JS和CSS引入，这会导致组件无法正常渲染

如果想用dayjs处理日期格式，可将formatDate方法替换为：

formatDate(date) {
  if (!date) return null
  return dayjs(date).format('DD-MM-YYYY')
}

记得在页面中引入dayjs：

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>

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