My Vue.js countdown isn't displaying the values correctly. Despite defining everything as numbers, I keep getting an error in the console:
[Vue warn]: Invalid prop: type check failed for prop "date". Expected Number, got String.
I've gone through the single file component guide from Vue, but I can't seem to figure out what I'm doing wrong.
app.js
import './bootstrap.js';
import Echo from 'laravel-echo';
import Vue from 'vue';
import CurrentTime from './components/CurrentTime';
import Bitbucket from './components/Bitbucket';
import InternetConnection from './components/InternetConnection';
import LastFm from './components/LastFm';
import PackagistStatistics from './components/PackagistStatistics';
import RainForecast from './components/RainForecast';
import Placeholder from './components/Placeholder';
import Youtube from './components/Youtube';
import ProjectCountdown from './components/ProjectCountdown';
import Countdown from './components/Countdown';
Vue.component('countdown', Countdown);
new Vue({
el: '#dashboard',
components: {
CurrentTime,
InternetConnection,
Bitbucket,
LastFm,
PackagistStatistics,
RainForecast,
Placeholder,
Youtube,
ProjectCountdown,
Countdown
},
created() {
this.echo = new Echo({
broadcaster: 'pusher',
key: window.dashboard.pusherKey,
cluster: 'eu',
encrypted: true
});
},
});
ProjectCountdown.vue
<template>
<div id="dashboard">
<Countdown date="March 20, 2017 12:00"></Countdown>
{{days}}
</div>
</template>
<script>
import Grid from './Grid';
import Vue from 'vue';
import Countdown from './Countdown';
export default {
components: {
Grid,
Countdown,
},
props: {
grid: {
type: String,
},
},
data() {
return {
}
}
}
// Vue.filter('two_digits', function (value) {
// if(value.toString().length <= 1)
// {
// return "0" + value.toString()
// }
// return value.toString();
// });
</script>
Countdown.vue
<template>
<div>
{{ seconds }}
</div>
</template>
<script>
import Vue from 'vue';
export default {
props: {
date: {
type: Number,
coerce: str => Math.trunc(Date.parse(str) / 1000)
},
},
data() {
return {
now: Math.trunc((new Date()).getTime() / 1000)
}
},
ready() {
window.setInterval(() => {
this.now = Math.trunc((new Date()).getTime() / 1000);
},1000);
},
computed: {
seconds() {
return (this.date - this.now) % 60;
},
minutes() {
return Math.trunc((this.date - this.now) / 60) % 60;
},
hours() {
return Math.trunc((this.date - this.now) / 60 / 60) % 24;
},
days() {
return Math.trunc((this.date - this.now) / 60 / 60 / 24);
},
},
}
</script>