it-swarm.com.de

Ungültige Requisite: Die Typprüfung ist für die Requisite fehlgeschlagen

Ich habe mit Vue.js einen Countdown erstellt, aber ich habe Probleme, die Werte anzuzeigen, die ich bekomme. Ich habe zwei Komponenten und ich habe die Anleitung für einzelne Dateikomponenten von Vue gelesen, aber ich verstehe einfach nicht, was ich falsch mache. In der Konsole bekomme ich die folgende Fehlermeldung: 

[Vue warn]: Ungültiges Requisite: Typprüfung für Prop "Datum" fehlgeschlagen. Anzahl erwartet, String erhalten.

Obwohl in meinem Code als eine Zahl definiert.

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

Wie der Fehler sagt, kommt es aus dieser Zeile:

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

Sie übergeben date als String, während in Requisiten eine Bestätigung dafür besteht, dass es sich um eine Zahl handelt. Hier ist deine Bestätigung:

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

Ich denke, im neuen Projekt verwenden Sie vuejs2, wo die Option zum Erzwingen entfernt war. Wie gesagt, hier können Sie eine berechnete Eigenschaft wie folgt verwenden:.

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

Sie können die modifiedDate jetzt anstelle von date verwenden.

5
Saurabh

Es ist nichts falsch mit Vue. Das Problem ist in Ihrem Code.

Sie haben das Datum als Zahl deklariert (übrigens warum?) Und dann übergeben Sie String ... 

Erklärung:

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

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

Die Verwendung der Nummer zum Speichern des Datums ist nicht die beste Idee (es kann funktionieren, aber es gibt bessere Möglichkeiten).

0
M U