Cannot read property 'getHours' of null - vuejs2

Question

I am following this vue/vuex/firebase tutorial https://www.youtube.com/watch?v=fls6uX7WWSs&list=PL55RiY5tL51qxUbODJG9cgrsVd7ZHbPrt&index=21 ,and I am currently stuck with the vuetify date and time pickers. I keep getting this error [Vue warn]: Error in render: "TypeError: Cannot read property 'getHours' of null"
I have tried several solutions posted here and other places like using .toISOString().substr(0, 10) to convert the date and time to a string and i get this error [Vue warn]: Error in render: "TypeError: Cannot read property '1' of null"
<template>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<h4>Create a new Meetup</h4>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<form #submit.prevent="onCreateMeetup">
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-text-field name="title" label="Title" id="title" v-model="title" required></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-text-field
name="location"
label="Location"
id="location"
v-model="location"
required
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-btn raised class="primary" #click="onPickFile">Upload Image</v-btn>
<input
type="file"
style="display: none"
ref="fileInput"
accept="image/*"
#change="onFilePicked"
>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<img :src="imageUrl" height="150">
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-textarea
name="description"
label="Description"
id="description"
v-model="description"
required
></v-textarea>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<h4>Choose a Data & Time</h4>
</v-flex>
</v-layout>
<v-layout row class="mb-2">
<v-flex xs12 sm6 offset-sm3>
<v-date-picker color="primary" v-model="date"></v-date-picker>
<p>{{date}}</p>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-time-picker color="primary" v-model="time"></v-time-picker>
<p>{{time}}</p>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-btn class="primary" :disabled="!formIsValid" type="submit">Create Meetup</v-btn>
<p>{{submittableDateTime}}</p>
</v-flex>
</v-layout>
</form>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data() {
return {
title: "",
location: "",
imageUrl: "",
description: "",
date: new Date().toISOString().substr(0, 10),
time: new Date().toISOString().substr(0, 10),
image: null
}
},
computed: {
formIsValid() {
return (
this.title !== "" &&
this.location !== "" &&
this.imageUrl !== "" &&
this.description !== ""
)
},
submittableDateTime() {
const date = new Date(this.date)
if (typeof this.time === "string") {
let hours = this.time.match(/^(\d+)/)[1]
const minutes = this.time.match(/:(\d+)/)[1]
date.setHours(hours)
date.setMinutes(minutes)
} else {
date.setHours(this.time.getHours())
date.setMinutes(this.time.getMinutes())
}
return date
}
},
methods: {
onCreateMeetup() {
if (!this.formIsValid) {
return
}
if (!this.image) {
return
}
const meetupData = {
title: this.title,
location: this.location,
image: this.image,
description: this.description,
date: this.submittableDateTime
}
this.$store.dispatch("createMeetup", meetupData)
this.$router.push("/meetups")
},
onPickFile() {
this.$refs.fileInput.click()
},
onFilePicked(event) {
const files = event.target.files
let filename = files[0].name
if (filename.lastIndexOf(".") <= 0) {
return alert("Please add a valid file!")
}
const fileReader = new FileReader()
fileReader.addEventListener("load", () => {
this.imageUrl = fileReader.result
})
fileReader.readAsDataURL(files[0])
this.image = files[0]
}
}
}
</script>
I want a format that will be submit-able to firebase like 2019-02-18T23:20:38.950Z that comes from the submittableDateTime computed function. Thanks for the halp!

Answer 1

You can't pass a string like 2019-01-01 to v-time-picker. It should be a Date object
You can change your init data
data() {
return {
title: "",
location: "",
imageUrl: "",
description: "",
date: new Date().toISOString().substr(0, 10),
time: new Date(),
image: null
}
}