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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Une solution consiste à utiliser
<span>包装{{ showWaitingTime(call.created_at) }}，即keyed 在timerCount上，以便当timerCount更改时重新渲染<span>（从而再次调用showWaitingTimepour calculer la nouvelle chaîne de temps) : p>Dans un modèle, utilisez
<span>包装时间戳字符串，该key绑定到timerCount:waiting time: {{ showWaitingTime(call.created_at) }}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, }, }, }Vous êtes à
timerCount上的观察程序正在有效地实现setInterval. Supprimez ce code car le code de l’étape 2 l’élimine.export default { watch: { // timerCount: {⋯} // ⛔️ remove this watch } }à
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 p>