时间戳

首页 > 解决方案 > 如果我在我的文本字段中输入，Vuetify 日期选择器不会保存正确的日期

vue.js - 如果我在我的文本字段中输入，Vuetify 日期选择器不会保存正确的日期

问题描述

再会。

我一直在使用 vuetify 创建一个表单，在这个表单中我需要选择一个日期，在该日期中我使用具有计算属性的日期选择器来格式化日期。如果我从日期选择器日历中选择日期，它工作得很好，但是当我尝试输入或复制粘贴日期时，我得到一个错误，它会返回我在日历上选择的任何最后一个日期。我到底做错了什么？

这是我得到的错误：'计算属性“computedDateFormatted1”已分配给但它没有设置器'

这是我的日期选择器

            <v-col cols="6">
              <v-menu
              ref="menu"
              v-model="menu"
              :close-on-content-click="false"
              transition="scale-transition"
              offset-y
              max-width="290px"
              min-width="290px"
              :rules="rules"
              >
              <template v-slot:activator="{ on }">
                  <v-text-field
                  v-model="computedDateFormatted"
                  label="Emissão"
                  hint="Select date"
                  persistent-hint
                  prepend-icon="mdi-calendar"
                  v-on="on"
                  ></v-text-field>
              </template>
              <v-date-picker v-model="emission" no-title @input="menu = false"></v-date-picker>
              </v-menu>
          </v-col>

这是我的计算变量和方法：

computed: {
computedDateFormatted () {
  return this.formatDate(this.emission)
},
}
methods: {
formatDate (date) {
      if (!date){
        return ""
      } else {
        const [year, month, day] = date.split('-')
        return `${day}/${month}/${year}`
      }
    }
}

标签： vue.jsdatepickervuetify.js

解决方案

尝试在文本字段上使用 :value

<v-text-field :value="date">

然后使用 vue 过滤器..您可以在此处查看文档如何使用它。 https://vuejs.org/v2/guide/filters.html

然后以您的价值添加过滤器。例如 :value="date | formatDate" 我希望它有所帮助。

推荐阅读