时刻持续时间 - 预期数字得到对象

Question

我的后端 returns 时间跨度如下：

"00:34:49.4073541"

我已阅读并且可以使用 moment.duration 到 return 该数据。

我想根据此超时显示分钟和秒并禁用按钮。

<template>
      <countdown :time="this.time">
        <p>Time Remaining： {{ this.time.minutes }} minutes, {{ this.time.seconds }} seconds.</p>
      </countdown>
</template> 

import moment from 'moment'
export default {
  data () {
    return {
      otp: '',
      initialOtpSent: false,
      time: 0,
    }
  },
  methods: {
    createOtp (bvModalEvt) {

      if (res.data.resetOtpRetriesTimestamp === undefined) {
        this.initialOtpSent = true
        this.$bvToast.toast('The otp has been sent!', {
          title: 'SUCCESS!',
          variant: 'success',
          solid: true,
          static: true,
          noAutoHide: false
        })
        // check on retries timestamp and disable sendotp and resend otp
      } else {
    const timeDuration = moment.duration(res.data.resetOtpRetriesTimestamp)
    this.time = timeDuration

错误是：

Invalid prop: type check failed for prop "time". Expected Number, got Object

Answer 1

请参阅 the usage docs 中您引用的组件的示例，该示例将 :time 属性显示为以毫秒为单位的数字。

您可以将您的 Moment 代码更改为 this.time = timeDuration.asMilliseconds();

然后更改模板以匹配文档中显示的格式。例如：

<countdown :time="this.time">
  <template slot-scope="props">Time Remaining：{{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
</countdown>

时刻持续时间 - 预期数字得到对象

Moment Duration - expected Number got Object

timespan

vue.js