잘못된 소품: 소품에 대한 형식 검사에 실패했습니다.

잘못된 소품: 소품에 대한 형식 검사에 실패했습니다.

Vue.js를 사용하여 카운트다운을 작성했지만 현재 값을 표시하는 데 어려움을 겪고 있습니다.컴포넌트가 2개 있고 Vue에서 파일 컴포넌트 가이드를 1개 읽었는데 제가 뭘 잘못하고 있는지 잘 모르겠어요.콘솔에 다음 오류가 나타납니다.

[Vue warn] :잘못된 소품: 소품 "날짜"에 대한 형식 검사에 실패했습니다.예상 번호입니다. 문자열이 있습니다.

내 코드에는 숫자로 정의되어 있지만.

app.module

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
    });
},
});

프로젝트 카운트다운표시하다

<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>

카운트다운.표시하다

<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스트링으로서, 소품에서는 번호가 유효합니다.검증은 다음과 같습니다.

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

새로운 프로젝트에서는 강제 옵션이 제거된 vuejs2를 사용하고 있다고 생각합니다.여기서 설명한 바와 같이 다음과 같은 계산 속성을 사용할 수 있습니다.

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

를 사용할 수 있습니다.modifiedDate대신 지금date.

Vue는 아무 문제가 없다.이 문제는 고객님의 코드에 있습니다.

날짜를 숫자(btw. why?)로 선언하고 문자열을 전달합니다.

선언:

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

사용방법:<Countdown date="March 20, 2017 12:00"></Countdown>

날짜를 저장하기 위해 숫자를 사용하는 것은 좋은 생각이 아닙니다(동작할 수 있지만 더 나은 방법이 있습니다).

언급URL : https://stackoverflow.com/questions/42715136/invalid-prop-type-check-failed-for-prop