Tatasusunan Vue.js: Jejaki masa menunggu untuk setiap objek

Question

Untuk konteks, saya mempunyai jadual yang menunjukkan panggilan masuk dan masa menunggu untuk setiap panggilan. Tatasusunan data kelihatan seperti ini:

[
   {
      id: 1,
      patient_name: lorem ipsum,
      created_at: 2022-02-02 09:10:35,
      ...
   },
   {
      id: 2,
      patient_name: dolor ipsum,
      created_at: 2022-02-02 09:00:35,
      ...
   }
]

Saya cuba memikirkan cara untuk menetapkan setTimeout kepada setiap objek, tetapi saya tersesat sepenuhnya.

Setakat ini saya mendapati bahawa adalah mungkin untuk membuat kaunter melalui pemerhati, tetapi ini sudah tentu hanya bertindak sebagai kaunter "global".

watch: {
        timerCount: {
            handler (value) {
                if (value > 0) {
                    setTimeout(() => {
                        this.timerCount++
                    }, 1000)
                }
            },
            immediate: true // This ensures the watcher is triggered upon creation
        }
    },

Adakah terdapat cara untuk menggunakan fungsi untuk memaparkan pembilang pada setiap objek? Saya berfikir seperti ini:

<template>
    <span v-for="call in calls" :key="call.id">
       Requested at: {{ call.created_at }}
       waiting time: {{ showWaitingTime(call.created_at) }} // <- Not sure if this can be done
    </span>
</template>
...
<script>
    ....
    methods: {
        showWaitingTime (created_at) {
            // get diff in seconds between created_at and now
            // do something here with a timeOut() to increment the object property...
        }
    }
</script>

Selain itu, saya ingin mengembalikan masa menunggu dalam format HH:mm:ss.

Answer 1

Satu penyelesaian ialah menggunakan <span> 包装 {{ showWaitingTime(call.created_at) }} ，即 keyed 在 timerCount 上，以便当 timerCount 更改时重新渲染 <span> （从而再次调用 showWaitingTime untuk mengira rentetan masa baharu):

1. Dalam templat, gunakan <span> 包装时间戳字符串，该 key 绑定到 timerCount:

   waiting time: {{ showWaitingTime(call.created_at) }}
   

2. Hentikan pemasa di calls 上的观察程序中，使用 setInterval 启动周期性计时器。在启动新计时器之前以及卸载组件时，请务必使用 clearInterval.

   export default {
     beforeUnmount() {
       clearInterval(this._updateTimer)
     },
     // Vue 2 equivalent of beforeUnmount()
     beforeDestroy() {
       clearInterval(this._updateTimer)
     },
     watch: {
       calls: {
         handler(calls) {
           clearInterval(this._updateTimer)
           if (calls.length) {
             this._updateTimer = setInterval(() => this.timerCount++, 1000)
           }
         },
         immediate: true,
       },
     },
   }
   

3. Anda berada di timerCount 上的观察程序正在有效地实现 setInterval. Alih keluar kod ini kerana kod dalam langkah 2 menghapuskannya.

   export default {
     watch: {
       // timerCount: {⋯}  // ⛔️ remove this watch
     }
   }
   

4. dishowWaitingTime()中，根据给定时间与现在的差值计算HH:mm:ss:

   export default {
     methods: {
       showWaitingTime(created_at) {
         const diff = new Date() - new Date(created_at)
         const twoD = x => `${Math.floor(x)}`.padStart(2, '0')
         const HH = twoD((diff / (60 * 60 * 1000)) % 24)
         const mm = twoD((diff / (60 * 1000)) % 60)
         const ss = twoD((diff / 1000) % 60)
         return `${HH}:${mm}:${ss}`
       },
     },
   }
   

Demo