Tableaux Vue.js : suivez le temps d'attente pour chaque objet

Question

Pour le contexte, j'ai un tableau montrant les appels entrants et le temps d'attente pour chaque appel. Le tableau de données ressemble à ceci : 

[
   {
      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,
      ...
   }
]

J'essaie de comprendre comment attribuer setTimeout à chaque objet, mais je suis complètement perdu.

Jusqu'à présent, j'ai découvert qu'il était possible de faire un compteur via un observateur, mais cela ne fait bien sûr office que de compteur "global".

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

Existe-t-il un moyen d'utiliser une fonction pour afficher le compteur sur chaque objet ? Je pensais à quelque chose comme ceci :

<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>

De plus, je souhaite renvoyer le temps d'attente au format HH:mm:ss.

Answer 1

Une solution consiste à utiliser <span> 包装 {{ showWaitingTime(call.created_at) }} ，即 keyed 在 timerCount 上，以便当 timerCount 更改时重新渲染 <span> （从而再次调用 showWaitingTime pour calculer la nouvelle chaîne de temps) :

1. Dans un modèle, utilisez <span> 包装时间戳字符串，该 key 绑定到 timerCount :

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

2. Arrêtez le chronomètre à 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. Vous êtes à timerCount 上的观察程序正在有效地实现 setInterval. Supprimez ce code car le code de l’étape 2 l’élimine.

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

4. àshowWaitingTime()中，根据给定时间与现在的差值计算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}`
       },
     },
   }
   

Démo