The time in my Vuetify data table is not updating

0
votes

I put an interval on the Vuetify data table to show the most recent date but the function is getting called but the table is not updating to show the new time in the cells. How can I update the table without refreshing the whole page?

Here is the codepen link showing my problem. https://codepen.io/entropy283/pen/rNxMXGX?editors=1011

1
vue.jsvuetify.jsv-data-table

1 Answers

2
votes

You can store the new date in a data variable and use this variable in your template. Example:

// 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);
                    });
                },