MomentJS + VueJS: Getting Relative Time From Now To A Certain Point In The Past - vue.js

Question

I use MomentJS.
in my VueJS-Code I want to get the relative time from now to that point in the past. In my template I incorporate the result of this short piece of JavaScript:
<template>
<div>{{ moment(message.createdAt, 'YYYYMMDD').fromNow() }}</div>
</template>
the object receives the date as follows:
message: { createdAt: Date.now() }
the result is always: a few seconds ago ...
how can I get the correct result (not always "a few seconds ago"):
EDIT:
this is my full template:
<template v-for="message in messages">
<div class="message">
<div class="text">{{ message.text }}</div>
<div class="date">{{ moment(message.createdAt).format('D.M.YYYY') }}</div>
<div class="date">{{ moment(message.createdAt).fromNow() }}</div>
</div>
</template>

Answer 1

Well, you can't use moment directly in your template, as it's not white-boxed (not accessible in the template).
Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date. You should not attempt to access user defined globals in template expressions.
Source: https://v2.vuejs.org/v2/guide/syntax.html#Using-JavaScript-Expressions
I would advise you to use some filter instead (you can also do it with methods in a very similar way).
Here is a working example.
new Vue({
el: "#app",
data() {
return {
messages: [
{
text: 'Message1',
createdAt: new Date() // Now
},
{
text: 'Message2',
createdAt: new Date(2016, 3, 1) // 1 April 2017
}
],
interval: null
};
},
filters: {
format(date) {
return moment(date).format('D.M.YYYY')
},
fromNow(date) {
return moment(date).fromNow();
}
},
created() {
this.interval = setInterval(() => this.$forceUpdate(), 1000);
// Trigger an update at least each second
// You should probably raise this duration as refreshing so often
// may be not useful
},
beforeDestroy() {
clearInterval(this.interval);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<div id="app">
<template v-for="message in messages">
<div class="message">
<div class="text">{{ message.text }}</div>
<div class="date">{{ message.createdAt | format }}</div>
<div class="date">{{ message.createdAt | fromNow }}</div>
</div>
</template>
</div>

Answer 2

Cobaltway's reply is working, but I would advise to extract the whole logic into a small component of its own, so you don't force Vue to re-render the whole component each time.
I created exactly this as an example a while ago, please see this fiddle:
https://jsfiddle.net/Linusborg/meovg84x/
Vue.component('dynamic-from-now',{
name:'DynamicFromNow',
props: {
tag: {type: String, default: 'span'},
value: {type: String, default: ()=> moment().toISOString() },
interval: {type: Number, default: 1000}
},
data() {
return { fromNow: moment(this.value).fromNow() }
},
mounted () {
this.intervalId = setInterval(this.updateFromNow, this.interval)
this.$watch('value', this.updateFromNow)
},
beforeDestroy() {
clearInterval(this.intervalId)
},
methods: {
updateFromNow() {
var newFromNow = moment(this.value).fromNow(this.dropFixes)
if (newFromNow !== this.fromNow) {
this.fromNow = newFromNow
}
}
},
render(h) {
return h(this.tag, this.fromNow)
}
})
Usage:
<dynamic-from-now :value="yourTimeStamp" :interval="2000" :tag="span" class="red" />