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

Question

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

这是显示我的问题的 codepen 链接。 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);
                    });
                },