Vue.js 배열: 각 객체의 대기 시간 추적

Question

상황에 맞게 수신 전화와 각 전화의 대기 시간을 보여주는 표가 있습니다. 데이터 배열은 다음과 같습니다: [{id:1,patient_name:loremipsum,created_at:2022-02-0209:10:35,...},{id:2,patient_name:doloripsum,created_at:2022-02-0209 : 00:35,...}] 각 개체에 setTimeout을 할당하는 방법을 알아내려고 하는데 완전히 헤매고 있습니다.

P粉596161915 · Answer

한 가지 해결책은 包装 {{ showWaitingTime(call.created_at) }} ，即 keyed 在 timerCount 上，以便当 timerCount 更改时重新渲染（从而再次调用 showWaitingTime를 사용하여 새 시간 문자열을 계산하는 것입니다.) : p>

템플릿에서 包装时间戳字符串，该 key 绑定到 timerCount를 사용하세요:
으아악
타이머를 calls 上的观察程序中，使用 setInterval 启动周期性计时器。在启动新计时器之前以及卸载组件时，请务必使用 clearInterval에 중지하세요.
으아악
현재 위치는 timerCount 上的观察程序正在有效地实现 setInterval입니다. 2단계의 코드가 이 코드를 제거하므로 이 코드를 제거하십시오.
으아악
atshowWaitingTime()中，根据给定时间与现在的差值计算HH:mm:ss:
으아악

데모 p>