使用带有日期选择器的新Date()不起作用

Question

我正在尝试使用Vue和Vuetify 关注此视频,v-model以v-date-picker使用date最初设置的数据值将当前日期应用于日期选择器组件new Date().

这是我项目的简化结构:

JS

new Vue({
  el:"#app",
  data: {
    date: new Date(),
    time: new Date()
  }
})

模板

<div id="app">
  <v-date-picker v-model="date"></v-date-picker>
    {{ date }}
  <v-time-picker v-model="time"></v-time-picker>
</div>

这是一个CodePen.不幸的是我无法使用Vuetify CSS来使用CodePen,但是如果你打开控制台,你会发现我v-date-picker在尝试使用new Date()该v-model指令时会遇到错误.日期选择器也不会渲染.该v-time-picker然而,工作正常.

在我的本地设置中,我用vue-cli创建了一个Vue项目.这是我到达那里的错误:

[Vue警告]:创建的钩子出错:"TypeError:dateString.split不是函数"

在发现

---> src/components/Meetup/CreateMeetup.vue在src/App.vue

我正在完成我正在关注的教程,所以我不知道这是否是Vue或Vuetify的最新版本的错误？或者我错过了什么？

Answer 1

显然（从收到的错误消息中）v-datepicker期望绑定到String。您可能要尝试

data: { 
    date: new Date().toJSON(), 
    time: new Date().toJSON() 
}

另请参阅Vuetify API文档（其中明确指出其期望v-model为类型String）：

v-model   String    null    Controls the displayed date. Must use ISO 8601 format.