Vue.js live timestamp update

Question

Vue.js live timestamp update

I have a function that returns the current timestamp with date and time, but it remains static upon page load without updating (meaning: the seconds and minutes do not change in real-time).

Desired Outcome: I want the time to be continuously moving and not static.

Code

script

methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;

      return dateTime;
    },
}

HTML

{{ currentDateTime() }}

screenshot

https://i.sstatic.net/bc0UY.jpg

Any suggestions?

javascript typescript vue.js vuejs2

Answer 1

Answer №1

currentDateTime() function will only be called once initially. To have it continuously update, utilize the setInterval() method to execute it every 1 second.

data: {
    timestamp: ''
},
mounted: function () {
    setInterval(() => { this.currentDateTime() }, 1000)
  }
}),
methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;
      this.timestamp = dateTime;
    },
}

HTML

{{ timestamp }}

Answer 2

currentDateTime() function will only be called once initially. To have it continuously update, utilize the setInterval() method to execute it every 1 second.

data: {
    timestamp: ''
},
mounted: function () {
    setInterval(() => { this.currentDateTime() }, 1000)
  }
}),
methods: {
  currentDateTime() {
      const current = new Date();
      const date =
        current.getFullYear() +
        "-" +
        (current.getMonth() + 1) +
        "-" +
        current.getDate();
      const time =
        current.getHours() +
        ":" +
        current.getMinutes() +
        ":" +
        current.getSeconds();
      const dateTime = date + " " + time;
      this.timestamp = dateTime;
    },
}

HTML

{{ timestamp }}

Vue.js live timestamp update

Code

Answer №1

Similar questions

What is the best approach to concurrently update a single array from multiple functions?

Can the color of text be adjusted (to either white or black) based on the background color (in any color and format)?

An error is encountered with the 'this' keyword in the map operator of Angular

When utilizing JavaScript to input text, I have observed that if I enter text in one text box, any previously entered value is automatically deleted

Missing value: Attempted to access properties of an undefined variable

Anchor tags fail to function properly due to jQuery interference

What is the best way to pass variables to a function in an Angular

JavaScript Generated From TypeScript Encountering TypeError

the div background is limited to the exact size of the text, not filling the entire

Encountered a 'SyntaxError: await is only valid in async function' error while trying to utilize the top-level await feature in Node v14.14.0

Struggle to deduce the generic parameter of a superior interface in Typescript

Retrieve data from AJAX request using array index

How to prevent horizontal scrolling on the right side of a div element

jQuery - preserving the integrity of array members when extending objects

Emulating the sorting functions in Excel, including "sort by" and "then by" actions

Values returned by XmlHttpRequest

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Error encountered while executing React-Native run-android command

Retrieve values of data attributes and HTML elements into an array

Tips for preventing the need to re-render every child component generated by the v-for directive