将 new Date() 与 v-date-picker 一起使用不起作用 [英] Using new Date() with v-date-picker doesn't work

问题描述

我正在尝试关注

I'm trying to follow this video using Vue and Vuetify to apply the current date with v-model to the date picker component v-date-picker using the data value date that's initially being set with new Date().

This is a simplified structure of my project:

JS

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

Template

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

And here's a CodePen. Unfortunately I couldn't get the Vuetify CSS to work with the CodePen, but if you open up the console, you'll see that I get errors in the v-date-picker when trying to use new Date() with the v-model directive. Also the date picker isn't rendering. The v-time-picker however works fine.

On my local setup I've created a Vue project with the vue-cli. Here's the error I'm getting there:

[Vue warn]: Error in created hook: "TypeError: dateString.split is not a function"

found in

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

I'm doing exactly as in the tutorial I'm following, so I don't know if this is a bug with the latest version of either Vue or Vuetify? Or am I missing something?

解决方案

Obviously (from the error message you're getting) v-datepicker expects to be bound to a String. You might want to try

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

https://codepen.io/connexo/pen/ypWxLv

Also see Vuetify API docs (which explicitly states it expects v-model to be of type String):

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

这篇关于将 new Date() 与 v-date-picker 一起使用不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！