Javascript 无效的道具：道具的类型检查失败

Invalid prop: type check failed for prop

提问by Lucafraser

I created a countdown with Vue.js but I am having trouble showing the values I am getting. I have two components and I have read the single file component guide from Vue but I just don't seem to understand what it is that I am doing wrong. In the console I get the follow error:

我用 Vue.js 创建了一个倒计时，但我无法显示我得到的值。我有两个组件，我已经阅读了 Vue 的单文件组件指南，但我似乎不明白我做错了什么。在控制台中，我收到以下错误：

[Vue warn]: Invalid prop: type check failed for prop "date". Expected Number, got String.

[Vue 警告]：无效的道具：道具“日期”的类型检查失败。预期数字，得到字符串。

Though in my code it is defined as a number.

虽然在我的代码中它被定义为一个数字。

app.js

应用程序.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

项目倒计时.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

倒计时.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>

回答by Saurabh

As the error is saying, It is coming from this line:

正如错误所说，它来自这一行：

<Countdown date="March 20, 2017 12:00"></Countdown>

You are passing dateas String, while in props there is validation for it being an Number. Here is your validation:

你date作为字符串传递，而在道具中有验证它是一个数字。这是您的验证：

props: {
    date: {
        type: Number,
        coerce: str => Math.trunc(Date.parse(str) / 1000)
    },
},

I think in the new project you are using vuejs2, where coerce option has been removed. As stated hereyou can use a computed property like following:.

我认为在新项目中您使用的是 vuejs2，其中强制选项已被删除。如here所述，您可以使用如下计算属性：

props: {
    date: {
        type: Number
    },
},
computed: {
   modifiedDate: function(){
       return Math.trunc(Date.parse(this.date) / 1000)
   }
}

You can use the modifiedDatenow instead of date.

您可以使用modifiedDatenow 而不是date。

回答by Marek Urbanowicz

It is nothing wrong with Vue. The issue is in your code.

Vue 没有任何问题。问题出在您的代码中。

You declared date as number (btw. why?) and then you are passing string...

您将日期声明为数字（顺便说一句。为什么？）然后您正在传递字符串...

Declaration:

宣言：

props: {
    date: {
        type: Number,
        coerce: str => Math.trunc(Date.parse(str) / 1000)
    },
},

Usage: <Countdown date="March 20, 2017 12:00"></Countdown>

用法： <Countdown date="March 20, 2017 12:00"></Countdown>

Using number to store date is not best idea (it can work but there are better ways).

使用数字来存储日期不是最好的主意（它可以工作，但有更好的方法）。