[Vue warn]: Invalid prop: custom validator check failed for prop "time"

Question

I have a countdown timer, and is working well, but, in console i have this error: [Vue warn]: Invalid prop: custom validator check failed for prop "time". and i think is someting about datetime output, if i put :time="new Date('03/09/2021 00:00:00').getTime()" the error will be removed and this im trying to achive, but if i do like this: :time="new Date(dataInscrieri.data_inscrieri).getTime()" from mysql datetime the error is present. Some help? Many thanks!

Code:

 <countdown :time="new Date(dataInscrieri.data_inscrieri).getTime() - new Date().getTime()">

            <template slot-scope="props">

              <div class="single-counter">
                <span class="timer number mb-2">{{ props.days }}</span>
                <span>Zile</span>
              </div>

              <div class="single-counter">
                <span class="timer number mb-2">{{ props.hours }}</span>
                <span>Ore</span>
              </div>

              <div class="single-counter">
                <span class="timer number mb-2">{{ props.minutes }}</span>
                <span>Minute</span>
              </div>

              <div class="single-counter">
                <span class="timer number mb-2">{{ props.seconds }}</span>
                <span>Secunde</span>
              </div>

            </template>
          </countdown>

export default { 
  data () {
    return {
      dataInscrieri: [] 
    }
  },
  components: {
    'countdown': VueCountdown,
    StatisticsCardLine
  },
  created () {
    //  Data inscrieri eveniment
    this.$http.get('/api/users/data-inscrieri/event')
      .then((response) => { this.dataInscrieri = response.data.results })
      .catch((error)   => { console.log(error) }) 
  }  
}

dataInscrieri.data_inscrieri output from db is:

2020-11-02T22:00:00.000Z

Answer 1

Make sure dataInscrieri.data_inscrieri is valid time and I see in VueCountdown prop -> :time is Number type, when you send other than a number, Vue throws Invalid Prop type type warning.

I think, you can use method to covert the time to number. This will help you to add check before sending time to Countdown component.

<countdown :time="getTime(dataInscrieri.data_inscrieri)">....
...

methods: {
   getTime(date) {
     const datetime = new Date(date)
     return datetime !== 'Invalid Date' ? datetime.getTime() - new Date().getTime() : null
   }
}