Is there a way to retrieve real-time information using momentjs in a Vue.js application without needing to refresh the

Question

Is there a way to retrieve real-time information using momentjs in a Vue.js application without needing to refresh the

I have a unique table where I showcase details about a particular website. Among the displayed information is the timestamp indicating when the data was last updated.
At the top of the table, my aim is to include an icon that will only appear if the duration between now and the last data refresh exceeds 5 minutes. Furthermore, I desire for this time display to automatically update without necessitating a page refresh from the user.

In order to implement this functionality, I incorporated a specific component within my Vue.js code.

computed () {
getMinutesPassedSinceLastRefresh () {
     if (moment(this.currentTime).diff(this.lastRefreshTime, 'minutes') >= 5) {
        return moment(this.currentTime).diff(this.lastRefreshTime, 'minutes')
      }
  }
}

This function calculates the number of minutes elapsed since the data was last refreshed up to the present time. Nevertheless, the data does not dynamically update by itself; instead, it requires either a manual page refresh or switching tabs for it to reflect the latest information.

Do you have any creative solutions on how this issue can be resolved?

javascript vue.js vuejs2 momentjs computed-properties

Answer 1

Answer №1

Using setInterval to update the currentTime value and a computed property to show the time difference in your HTML template is key.

Check out this implementation:

new Vue({
  el: "#app",
  data: {
    currentTime: moment(),
    lastUpdatedAt: moment(),
    intervalRef: null,
  },

  computed: {
    difference() {
      return moment.duration(this.lastUpdatedAt.diff(this.currentTime)).humanize(true)
    }
  },

  mounted() {
    this.intervalRef = setInterval(() => {
      this.currentTime = moment()
    }, 5000)
  },

  unmounted() {
    this.intervalRef = null
  }
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96fbf9fbf3f8e2d6a4b8a4afb8a2">[email protected]</a>/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Time elapsed since last update: {{difference}}</h2>
</div>

This code snippet updates the time every 5 seconds.

For more information on Moment difference, visit: https://momentjs.com/docs/#/durations/diffing/

See an example on JSFiddle: JSFiddle Example

Answer 2

Using setInterval to update the currentTime value and a computed property to show the time difference in your HTML template is key.

Check out this implementation:

new Vue({
  el: "#app",
  data: {
    currentTime: moment(),
    lastUpdatedAt: moment(),
    intervalRef: null,
  },

  computed: {
    difference() {
      return moment.duration(this.lastUpdatedAt.diff(this.currentTime)).humanize(true)
    }
  },

  mounted() {
    this.intervalRef = setInterval(() => {
      this.currentTime = moment()
    }, 5000)
  },

  unmounted() {
    this.intervalRef = null
  }
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96fbf9fbf3f8e2d6a4b8a4afb8a2">[email protected]</a>/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Time elapsed since last update: {{difference}}</h2>
</div>

This code snippet updates the time every 5 seconds.

For more information on Moment difference, visit: https://momentjs.com/docs/#/durations/diffing/

See an example on JSFiddle: JSFiddle Example

Answer 3

Answer №2

It looks like the currentTime and/or lastRefreshTime variables may not be reactive - make sure they are properly defined in the data section with default values assigned. Here is an example of how it should be done:

data () {
  return {
    currentTime: null,
    lastRefreshTime: null
  }
}

The initial values can be anything, but it's crucial that they are defined.

In addition, computed properties should return a value instead of relying on undefined. While it is uncertain if this could be causing the problem, try structuring it like this:

const minutesSinceLastUpdate = moment... // calculate minutes
return minutesSinceLastUpdate > 5
  ? minutesSinceLastUpdate
  : null

Check out the documentation on reactivity for more information

Answer 4

It looks like the currentTime and/or lastRefreshTime variables may not be reactive - make sure they are properly defined in the data section with default values assigned. Here is an example of how it should be done:

data () {
  return {
    currentTime: null,
    lastRefreshTime: null
  }
}

The initial values can be anything, but it's crucial that they are defined.

In addition, computed properties should return a value instead of relying on undefined. While it is uncertain if this could be causing the problem, try structuring it like this:

const minutesSinceLastUpdate = moment... // calculate minutes
return minutesSinceLastUpdate > 5
  ? minutesSinceLastUpdate
  : null

Check out the documentation on reactivity for more information

Is there a way to retrieve real-time information using momentjs in a Vue.js application without needing to refresh the

Answer №1

Answer №2

Similar questions

Incorporate PrimeVue into Vue's custom elements

The altered variable refuses to show up

The Datepicker and Tablesorter dilemma

Vue.js - issue with filtering results not displaying correctly

The function Sync in the cp method of fs.default is not a valid function

Flick user media cards left or right to uncover the following one

When utilizing the map function with an array containing 168 objects in the state of a React application, a freeze of around 1

Sorting elements in an array based on an 'in' condition in TypeScript

How can I simulate keyboard events in Angular using a button click?

Not enough resources error in ajax code for live update clock functionality

tips for iterating through a json string

Creating dependent dropdowns using Laravel Inertia Vue: A step-by-step guide

Assign a class to the initial element of the Vuetify v-select module

Unable to retrieve props from server-side page to client-side component in a Next.js application router

A step-by-step guide on setting up a confirmation pop-up message using Gravity Forms

What is the best way to display various components on a single page?

What is the best way to correlate two arrays of strings with one another?

What steps can be taken to enable automatic playback for this slider?

What is the best way to transform this code into a JavaScript string that can be evaluated at a later time?

Ajax fails to send requests to PHP after changing the URL directory