【问题标题】:Vuetify date picker doesn't save the correct date if i type it in my text field如果我在我的文本字段中输入,Vuetify 日期选择器不会保存正确的日期
【发布时间】:2020-09-29 00:52:10
【问题描述】:

美好的一天。

我一直在使用 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}`
      }
    }
}

【问题讨论】:

  • 访问this link并查看Date pickers - formatting date

标签: vue.js datepicker vuetify.js


【解决方案1】:

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

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

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

然后根据您的价值添加过滤器。例如 :value="date | formatDate" 希望对你有帮助。

【讨论】:

猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-11-25
  • 2019-12-08
  • 1970-01-01
相关资源
最近更新 更多