часы реального времени с vue js

#vue.js #vuejs2

#vue.js #vuejs2

Вопрос:

Я написал небольшой компонент часов для одного из своих проектов, но я не обновил значение для своих часов.

Краткий отрывок моего кода:

     time() {
      let now = new Date();
      let hour = this.zeroPadding(now.getHours());
      let minute = this.zeroPadding(now.getMinutes());
      let second = this.zeroPadding(now.getSeconds());

      console.log(hour.toString()   minute.toString()   second.toString())
      if(!this.realtime)
        return this.value
      else
        return hour.toString()   ":"   minute.toString()   ":"   second.toString()
    }
  },
  mounted() {
    setInterval(() => {
        this.time()
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.polling)
  }
  

Кто-нибудь находит ошибку?
Я неправильно понял опрос?

Приветствую, Маттиас

Комментарии:

1. Пожалуйста, добавьте полный код с вашим шаблоном. time Метод возвращает строку, но где вы ее используете?

Ответ №1:

Значение времени, которое вы хотите отобразить, должно быть свойством данных / вычислений, чтобы оно было реактивным, и Vue мог его отслеживать. Краткий способ сделать это:

 export default {
  data() {
    return {
      interval: null,
      time: null
    }
  },
  beforeDestroy() {
    // prevent memory leak
    clearInterval(this.interval)
  },
  created() {
    // update the time every second
    this.interval = setInterval(() => {
      // Concise way to format time according to system locale.
      // In my case this returns "3:48:00 am"
      this.time = Intl.DateTimeFormat(navigator.language, {
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric'
      }).format()
    }, 1000)
  }
}