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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Satu penyelesaian ialah menggunakan
<span>包装{{ showWaitingTime(call.created_at) }}，即keyed 在timerCount上，以便当timerCount更改时重新渲染<span>（从而再次调用showWaitingTimeuntuk mengira rentetan masa baharu): p>Dalam templat, gunakan
<span>包装时间戳字符串，该key绑定到timerCount:waiting time: {{ showWaitingTime(call.created_at) }}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, }, }, }Anda berada di
timerCount上的观察程序正在有效地实现setInterval. Alih keluar kod ini kerana kod dalam langkah 2 menghapuskannya.export default { watch: { // timerCount: {⋯} // ⛔️ remove this watch } }di
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}` }, }, }Demo p>