[Vue 警告]：无效道具：自定义验证程序检查失败道具 "time"

Question

我有一个倒计时计时器，并且运行良好，但是，在控制台中我有这个错误：[Vue warn]: Invalid prop: custom validator check failed for prop "time". 我认为是关于日期时间输出的，如果我输入 :time="new Date('03/09/2021 00:00:00').getTime()" 错误将被删除，这我试图实现，但如果我这样做： :time="new Date(dataInscrieri.data_inscrieri).getTime()" from mysql datetime 错误存在。一些帮助？非常感谢！

代码：

 <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 数据库的输出是：

2020-11-02T22:00:00.000Z

Answer 1

确保 dataInscrieri.data_inscrieri 是有效时间并且我在 VueCountdown 中看到 prop -> :time 是 Number 类型，当你发送的不是数字时，Vue 抛出 Invalid Prop type 输入警告。

我觉得，你可以用方法把时间转换成数字。这将帮助您在将时间发送到倒计时组件之前添加检查。

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

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

[Vue 警告]：无效道具：自定义验证程序检查失败道具 "time"

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

javascript

vue.js

datetime

countdown