Переменная обратного отсчета (ЧЧ: мм: сс)

Question

Я анализирую дату ГГГГ-мм-дд и вычисляю разницу до полуночи. Результат будет всегда менее 24 часов, например 10:01:10 - ЧЧ: мм: сс, пока не истечет. Интересно, как я мог достичь функциональности обратного отсчета на данном примере.

<template>
    <Label :text="date.expires | readableTime"></Label>
    </template>

    filters: {
        readableTime(value) {
          var now = moment(new Date());
          var end = moment(value);
          var diff = moment.duration(end.diff(now));
          try {
            return moment.utc(diff.as("milliseconds")).format("HH:mm:ss");
          } catch (e) {
            return "00:00:00";
          }
        }
      }

Answer 1

Вы должны использовать использовать таймер и свойство реактивных данных. Я рекомендую вам сохранить данные различий между компонентами, запустить таймер при монтировании компонентов и очистить его до удаления

data() {
    return {
        diff: this.calculareDiff() 
    }
}

methods: {
    calculareDiff() {
        const now = moment(new Date());
        const end = moment(this.date.expires);
        this.diff = moment.duration(end.diff(now));
    }
},

mounted() {
    this.timer = setInterval(() => this.calculareDiff(), 1000)
},

beforeDestroy() {
    clearInterval(this.timer)
}