Vue.js 在Vue中实时保持时间和时差

我想从订单时间中获取经过的时间，但我收到了一个警告 [Vue warn]：组件渲染函数中可能存在无限更新循环

Vue中的正确方法应该是什么

当前时间：2018-06-18T09:12:21+08:00 订单号：1 订单时间：2018-06-16周六23:06:92弹性时间： 项目大小数量价格小计 测试披萨16 1100.00

以下是我尝试过的：

    <tbody>
                    <div class="class order-number">
                        <strong><em>Order Number: {{ getOrders.indexOf(orders)+1 }}</em></strong>
                        <button class="btn btn-outline-danger btn-sm">X</button>
                        <!-- <div>{{ getOrders[getOrders.indexOf(orders)] }}</div> -->
                        <div>Order Time: {{ formatOrderTime(getOrders, orders) }}  <em>Elasped Time: </em> 
<span :style="sytleState">{{ elaspedTime(getOrders, orders) }}</span></div>
                    </div>
                    <div></div>
                    <tr v-for="(orderItems, index) in orders['.value']" :key='index'>
                        <td>{{ orderItems.name }}</td>
                        <td>{{ orderItems.size }}</td>
                        <td>{{ orderItems.quantity }}</td>
                        <td>{{ orderItems.price }}</td>
                        <td>{{ (orderItems.quantity*orderItems.price).toFixed(2) }}</td>
                    </tr>
                </tbody>    

---

谢谢你的帮助。Thx.

虽然上面的注释中所写的是正确的（开始使用getter或computed属性），但我发现这是处理这个问题最简单的方法，因为您已经使用了moment-using Vue filter

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

然后在模板中，您可以像这样使用它：

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

{{yourVariable |刚才}

不需要计算时差，也不需要为它编写方法：）

---

祝你好运

我用计算的过滤器解决了这个问题，但效果不太好

               <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() 
                    }
            }) 
        },

Order Time:{{moment（getOrderTime[index]）.format（）}}

弹性时间：
{{elaspedTime[index].days}}days
{{elaspedTime[index].hours}}hrs
{{elaspedTime[index].minutes}}min
{{elaspedTime[index].秒}}秒
计算：{
getOrderTime（）{
返回此.getOrders.map（函数（订单）{
退货订单['.value'][0]['orderTime']
}) 
},
时间（）{
让我们现在
返回此.getOrders.map（函数（订单）{
让value=now-orders['.value'][0]['orderTime']
返回{
天数：矩.duration（值）.days（），
小时数：矩.duration（值）.hours（），
分钟数：矩.duration（值）.minutes（），
秒：矩.持续时间（值）.seconds（）
}
}) 
},

---

感谢所有的帮助：）

是否

getOrderTime

和

elapsedTime

方法应该是getter？它们应该是纯的。它们不应该修改状态，特别是当您从模板内（即渲染期间）调用它们时，因为这将触发另一个渲染（因此会发出警告）。首先，感谢您的回复。@Andrey首先，为了获取orderTime，我做了以下操作，但它不能作为orderTime=0的初始值。如何将v-for中的orderTime值传递给数据？订单时间：{{orderTime | formatOrderTime}筛选器：{formatOrderTime（getOrders，orders）{返回时刻（getOrders[getOrders.indexOf（orders）]['.value'][0]['orderTime']）。格式（“YYYY-MM-DD-dddd HH:MM:SS”）}，你应该这样做，反之亦然-首先得到你想要的，然后调用矩函数来计算时间。现在你尝试将逻辑放入过滤器本身，而过滤器不知道任何顺序：）

               <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() 
                    }
            }) 
        },