Vuetify 日期选择器格式答案

【问题标题】：Vuetify Datepicker formatVuetify 日期选择器格式
【发布时间】：2020-04-13 16:41:11
【问题描述】：

我有一个 Vuetify 日期选择器：

<v-menu
    v-model="menu1"
    :close-on-content-click="false"
    max-width="290"
>
    <template v-slot:activator="{ on }">
    <v-text-field
        v-model="editedItem.Eintrittsdatum"
        clearable
        color="primary"
        label="Eintrittsdatum"
        v-on="on"
    ></v-text-field>
    </template>
    <v-date-picker
        v-model="editedItem.Eintrittsdatum"
        @change="menu1 = false"
        locale="de"
    ></v-date-picker>
</v-menu>

返回值是正常格式的日期（yyyy-mm-dd）。这也是我想保存在 v-model 中的数据（最终保存在数据对象中）。但是，为了吸引眼球，我想以不同的格式显示文本字段的值。

我创建了一个小函数：

formatDate(date) {
    return date ? moment(date).format("L") : "";
}

有没有办法调用这个函数来覆盖显示的值？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

将 formatDate 更改为计算值，并利用您已经定义的 editedItem.Eintrittsdatum，它在您的实际 v-date-picker 的 v-model 中使用

在你的脚本标签中：

computed: {
  formatDate() {
    return this.editedItem.Eintrittsdatum
      ? moment(this.editedItem.Eintrittsdatum).format("L")
      : "";
  }
}

已更改v-text-field

<v-text-field
    :value="formatDate"
    clearable
    color="primary"
    label="Eintrittsdatum"
    v-on="on"
></v-text-field>

工作沙盒：https://codesandbox.io/s/vuetify-playground-y7ziz

【讨论】：