我的 Vuetify 数据中的时间 table 没有更新

Question

我在 Vuetify 数据上放置了一个时间间隔 table 以显示最近的日期，但正在调用该函数，但 table 未更新以在单元格中显示新时间。 How can I update the table without refreshing the whole page?

这是显示我的问题的代码笔 link。 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);
                    });
                },

我的 Vuetify 数据中的时间 table 没有更新

The time in my Vuetify data table is not updating

vue.js

vuetify.js

v-data-table