我使用Vue.js创建了一个倒数计时,但我无法显示自己得到的值。我有两个组件,并且已经阅读了Vue的单个文件组件指南,但是我似乎不明白我做错了什么。在控制台中,出现以下错误:
虽然在我的代码中,它被定义为数字。
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>
最佳答案
正如错误所言,它来自以下行:
<Countdown date="March 20, 2017 12:00"></Countdown>
您将
date
作为String传递,而在props中,将其作为数字进行验证。这是您的验证:props: {
date: {
type: Number,
coerce: str => Math.trunc(Date.parse(str) / 1000)
},
},
我认为在新项目中,您正在使用vuejs2,其中coerce选项为removed。如here所述,您可以使用如下所示的计算属性:
props: {
date: {
type: Number
},
},
computed: {
modifiedDate: function(){
return Math.trunc(Date.parse(this.date) / 1000)
}
}
您现在可以使用
modifiedDate
代替date
。