What is the best method to trigger a reevaluation of static parameters?

Question

What is the best method to trigger a reevaluation of static parameters?

Explanation behind my question

Every day, I am sent two timestamps through MQTT at 01:15 - these timestamps represent the beginning and end of a daily event (in this case, when my children are at school). It may not be the most exciting information for a home dashboard, but it serves its purpose.

https://i.sstatic.net/g4fJ4.png

Currently, my dashboard displays 9:00 → 17:10, updating whenever new MQTT messages are received and the values for start and end change.

This functionality works well.

Now, I want to enhance the display to show additional information as follows:

9:00 → 17:10 (in 27 minutes)

The part in parentheses represents the time remaining until the end of the school day (17:10). I have the necessary logic to compute and display this information, with the condition that it should only be visible when "now" is within the specified timeframe.

This is achieved by using the following code snippet:

{{ extractTime(enfant.start) }} → {{ extractTime(enfant.end) }} <span v-if="dansCreneau(enfant.start, enfant.end)">({{dansTime(enfant.end)}})</span>

extractTime converts an ISO date to a 24-hour time format
dansCreneau returns true if "now" is between the specified dates, otherwise returns false
dansTime provides a human-readable representation of the time remaining until the end of the school day

The Issue I'm Facing

I can successfully display this information once, with a single calculation determining what goes inside the parentheses. However, from Vue's perspective, there is no compelling reason to recalculate it unless something changes.

I've considered using setInterval(XXX, 55000); for continuous updates and I'm unsure about what XXX should entail. Initially, I thought of reassigning enfant = enfant within the interval function, but this wouldn't trigger a recalculation since the value of enfant remains the same.

What would be the correct approach to force the recalculation and update of the remaining time?

javascript vue.js

Answer 1

Answer №1

To keep track of the current time, store it in the component's data and create a computed property that calculates the time difference between the stored current time and another time value.

Continuously update the current time using setInterval...

Here is an example of a simple clock implementation:

new Vue({
  el: '#clock',
  data: {
    currentTime: new Date(),
    timer: null
  },
  computed: {
    displayTime: function() {
      return this.currentTime.toLocaleTimeString();
    }
  },
  mounted: function() {
    let self = this;
    this.timer = setInterval(function() {
      self.currentTime = new Date()
    }, 1000)
  },
  beforeDestroy: function() {
    clearInterval(this.timer)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="clock">
  <div>{{ displayTime }}</div>
</div>

Answer 2

To keep track of the current time, store it in the component's data and create a computed property that calculates the time difference between the stored current time and another time value.

Continuously update the current time using setInterval...

Here is an example of a simple clock implementation:

new Vue({
  el: '#clock',
  data: {
    currentTime: new Date(),
    timer: null
  },
  computed: {
    displayTime: function() {
      return this.currentTime.toLocaleTimeString();
    }
  },
  mounted: function() {
    let self = this;
    this.timer = setInterval(function() {
      self.currentTime = new Date()
    }, 1000)
  },
  beforeDestroy: function() {
    clearInterval(this.timer)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="clock">
  <div>{{ displayTime }}</div>
</div>

What is the best method to trigger a reevaluation of static parameters?

Explanation behind my question

The Issue I'm Facing

Answer №1

Similar questions

In Typescript, if at least one element in an array is not empty, the function should return false without utilizing iterators

"Enhancing user experience with React.js and Socket.io: dynamically updating list item positions based on

Tips for successfully passing store state as a prop in React-Redux with TypeScript

Understanding how to open a PNG file in the client-side browser and transform it using PNGJS in React

Adjust the node_modules path tailored to your project

Best method for reverting react-native to previous version

Uncontrolled discord bot flooding with messages despite being set to send messages only once every 60 seconds

What is the best way to divide text into key-value pairs using JavaScript?

Monitoring and recording user's browsing activities while excluding server-side scripting

Is it possible to utilize the router.query feature in a function within Next.js?

vue-chartjs is experiencing difficulties when it comes to showing the labels and datasets

Clicking on an element in React Material UI Autocomplete will bring it

Is there a potential impact on performance when utilizing local variables instead of repeatedly accessing properties?

Attempting to invoke setState on a Component before it has been mounted is not valid - tsx

When using AngularJS services to pass data, the data may be lost when the page is refreshed

What are the steps to resolve the vulnerability within vue-cli-service?

AngularJS allows you to toggle the visibility of a div at set intervals, creating

Asynchronously retrieving results in MongoDB

Function returning undefined when accessing prototype property in JavaScript

It appears that you are utilizing the runtime-only version of Vue, which does not include the template compiler