Время в моей таблице данных Vuetify не обновляется

Question

Я помещаю интервал в таблицу данных Vuetify, чтобы показать самую последнюю дату, но функция вызывается, но таблица не обновляется для отображения нового времени в ячейках. How can I update the table without refreshing the whole page?

Вот ссылка на код, показывающая мою проблему. https://codepen.io/entropy283/pen/rNxMXGX?editors=1011

Answer 1

Вы можете сохранить новую дату в переменной данных и использовать эту переменную в своем шаблоне. Пример:

// currentDate is the new data variable
<template v-slot:item.calories="{ item }">
  <v-chip dark>{{ currentDate }}</v-chip>
</template>

data(){
  return {
   currentDate: null
  }
},
  mounted: function () {
    // Execute immediately on mounted
    this.currentDate = this.getColor();

                    this.$nextTick(function () {
                        window.setInterval(() => {
                            // Set current date
                            this.currentDate = this.getColor();
                        }, 1000);
                    });
                },