Vue.js Moment.js - creating counter for time (hours)

I’m using Moment.js and Element UI and pug <template lang="pug">
I want to achieve “counter” for time (add 1 hour to currentTime).
el-input-number(v-model="value" controls-position="right" @change="handleChange" :min="Number(currentTime)" :max="Number(currentTime + hours)")

Now, is displaying time in long term as pic.
There is any way to achieve this effect?
This is my whole component with data:
Link to codepen.

Thank you for your time :sunny:

The easiest way would be to create a new computed property:

plusOneHour() {
  return moment(this.time).add(1, 'hours').format('HH:mm:ss');



As you can see, this is using an el-input.

In your example you are using an el-input-number, which is meant to display a range of numbers. As you are setting the minimum value to Number(new Date()) you’re left with a timestamp. If you want the timestamp to be one hour in the future, declare a data property like so:

data() {
  return {
    plusOneHour: Number(new Date()) + (1000 * 60 * 60)

And bind to it accordingly.



Thank you for your time. In this way I have got an error that “The computed property “plusOneHour” is already defined in data.”

Yeah, only do one or the other.

Or name the data property different to the computed property.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.