web-dev-qa-db-fra.com

Prop incorrect: échec de la vérification du type pour prop

J'ai créé un compte à rebours avec Vue.js mais je ne parviens pas à afficher les valeurs que je reçois. J'ai deux composants et j'ai lu le guide des composants de fichier unique de Vue mais je ne semble pas comprendre ce que je fais mal. Dans la console, j'obtiens l'erreur suivante: 

[Vue warn]: prop: type de contrôle non valide pour prop "date". Nombre attendu, String obtenu.

Bien que dans mon code, il est défini comme un nombre.

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>

Compte à rebours.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>
javascriptvue.jsvuejs2vue-component
4
Lucafraser

Comme le dit l'erreur, ça vient de cette ligne:

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

Vous transmettez date en tant que String, alors que dans les accessoires, il est validé que ce soit un nombre. Voici votre validation:

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

Je pense que dans le nouveau projet, vous utilisez vuejs2, où l'option de contrainte a été enlevée Comme indiqué ici , vous pouvez utiliser une propriété calculée comme suit:.

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

Vous pouvez utiliser la modifiedDate maintenant au lieu de date.

5
Saurabh

Il n'y a rien de mal avec Vue. Le problème est dans votre code.

Vous avez déclaré la date en tant que nombre (au fait, pourquoi?), Puis vous passez une chaîne ... 

Déclaration:

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

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

Utiliser un numéro pour stocker la date n'est pas la meilleure idée (cela peut fonctionner mais il y a de meilleures façons).

0
M U