0👍
✅
Here is how I would do such a thing, tell me if I am wrong:
First, I would create a component that will make the timer:
let Timer = Vue.extend({
template: '#timer',
props: ['timestamp'],
data () {
return {
formatted: ''
}
},
methods: {
format () {
let self = this
this.formatted = moment().to(moment(this.timestamp,'X'))
// Uncomment this line to see that reactivity works
// this.formatted = moment().format('X')
setTimeout(() => {
self.format()
},500)
}
},
created () {
this.format()
}
})
The timer takes one property, a UNIX timestamp in seconds. The component contains one method called format()
that will update the only data formatted
of the component. The method is recursive and calls itself every 500ms (with the setTimeout()
), you can make this number bigger if you want.
Here is a jsFiddle I made if you want to test it:
Source:stackexchange.com