如何修改Vuetify 3中v-date-picker的年份文本值？

要给v-date-picker的年份值添加'test'后缀（比如把'2021'改成'2021test'），可以通过Vuetify提供的插槽实现，以下是两种常用场景的解决方案：

1. 修改年份视图的头部标题 #

当v-date-picker处于年份视图时，头部显示的年份可通过title插槽自定义：

<template>
  <v-date-picker v-model="selectedDate" view="year">
    <template #title="{ title }">
      {{ title }}test
    </template>
  </v-date-picker>
</template>

<script setup>
import { ref } from 'vue'
const selectedDate = ref(new Date())
</script>

title参数对应当前显示的年份数值，直接拼接字符串即可实现需求。

2. 修改年份选择列表中的每个年份项 #

如果需要同时修改年份选择列表里的每一项文本（比如点击月份视图的年份弹出的选择器），可以搭配item插槽：

<template>
  <v-date-picker v-model="selectedDate">
    <!-- 自定义年份列表项 -->
    <template #item="{ item }">
      <span>{{ item.year }}test</span>
    </template>
    <!-- 自定义年份视图头部标题 -->
    <template #title="{ title }">
      {{ title }}test
    </template>
  </v-date-picker>
</template>

<script setup>
import { ref } from 'vue'
const selectedDate = ref(new Date())
</script>

item插槽的item.year会返回当前列表项对应的年份数值，拼接后就能替换原有的文本显示。

内容的提问来源于stack exchange，提问作者Dionico Noe C. Alegarbes