[Vuejs]-Keeping time and time difference in realtime in Vue

by

0👍

✅

I solved it by using computed, filters didn’t quite work out.

               <div>Order Time: {{ moment(getOrderTime[index]).format() }}  <br>
                    <em>Elasped Time: </em> 
                    <span :style="sytleState">
                        {{ elaspedTime[index].days }} days
                        {{ elaspedTime[index].hours }} hrs
                        {{ elaspedTime[index].minutes }} min
                        {{ elaspedTime[index].seconds }} sec
                    </span>
                </div>




computed: {
        getOrderTime() {
            return this.getOrders.map(function(orders) {
                return orders['.value'][0]['orderTime']
            }) 
        },
        elaspedTime() {
            let now = this.now
            return this.getOrders.map(function(orders) {
                let value = now - orders['.value'][0]['orderTime']
                return { 
                    days: moment.duration(value).days(), 
                    hours: moment.duration(value).hours(), 
                    minutes: moment.duration(value).minutes(), 
                    seconds: moment.duration(value).seconds() 
                    }
            }) 
        },

Thanks for all the help 🙂

0👍

While what is written in the comments above is true (start using getters or computed properties), I find this the absolute easiest way dealing with this, since you already use moment – using Vue filter!

Vue.filter('moment-ago', function (date) {
   return moment(date).fromNow()
})

And then in the template you can just use it like:

<div class="ago">{{ yourVariable | moment-ago }}</div>

There is no need to calculate time difference, nor write methods for it 🙂

Good luck!

Leave a comment