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

[lucafraser]

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



<template>
<div id="dashboard">
    <Countdown date="March 20, 2017 12:00"></Countdown>
    {{seconds}}
</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>

[znck]

Provide minimal reproduction code using JSFiddle/JSBin/Codepen to demonstrate your issue. You could start with this template that already includes the latest version of Vue.

Please make sure to read the Issue Reporting Guidelines before opening new issues. The issue list only accepts bug reports and feature requests.

[lucafraser]

@znck How do I provide a repro with two components?

[znck]

An example: https://jsfiddle.net/znck/39epgLj0/31/

PS: It (https://medium.com/@znck/fiddle-with-vue-js-dfd3e2924992) might be helpful too.

[posva]

You're probably doing <comp vaule="20" /> instead of <comp :value="20" />
Please, next time, ask questions on the forum or StackOverflow.

[grimpa]

@lucafraser Have you found a solution for this case? I'm having the same issue.

[lucafraser]

@grimpa Unfortunately not.

[posva]

You're passing a string to a Number prop:

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

You need to bind it

<Countdown :date="+new Date(March 20, 2017 12:00)"></Countdown>
<!-- 533 as a number -->
<Countdown :date="533"></Countdown>
<!-- 533 as a string -->
<Countdown date="533"></Countdown>

To pass it as a number

[grimpa]

@lucafraser,

I was reading about that and the problem seems to be the Vue version. In version 2, the 'coerce' was removed. I use only minutes and seconds, but you just keep the days and hour.

So the solution 'for me' is:

data () {
      return {
        now: Math.trunc((new Date()).getTime() / 1000)
      }
    },

    props: {
      date: {
        type: Number
      }
    },

    mounted () {
      window.setInterval(() => {
        this.now = Math.trunc((new Date()).getTime() / 1000)
      }, 1000)
    },

    computed: {
      modifiedDate () {
        return Math.trunc(Date.parse(this.date) / 1000)
      },
      seconds () {
        return (this.modifiedDate - this.now) % 60
      },
      minutes () {
        return Math.trunc((this.modifiedDate - this.now) / 60) % 60
      }
    },

    filters: {
      two_digits: function (value) {
        if (value.toString().length <= 1) {
          return '0' + value.toString()
        }
        return value.toString()
      }
    }

I Hope that help you.
Cheers.

[xgqfrms]

vue bug & data type bug

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

shit bug

Solutions