The time in my Vuetify data table is not updating

Question

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

Answer 1

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