vue.js - Vuetify 日期选择器格式

Question

我有一个 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") : "";
}

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

Answer 1

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

在你的脚本标签中:

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