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

Question

상황에 맞게 수신 전화와 각 전화의 대기 시간을 보여주는 표가 있습니다. 데이터 배열은 다음과 같습니다:

으아아아

각 개체에 setTimeout을 할당하는 방법을 알아내려고 하는데 완전히 헤매고 있습니다.

지금까지 관찰자를 통해 카운터를 만드는 것이 가능하다는 것을 알았지만 이는 물론 "전역" 카운터로만 작동합니다.

으아아아

각 개체에 카운터를 표시하는 기능을 사용할 수 있는 방법이 있나요? 나는 다음과 같은 생각을 하고 있었습니다:

으아아아

또한 대기 시간을 HH:mm:ss 형식으로 반환하고 싶습니다.

Answer 1

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

1. 템플릿에서 <span> 包装时间戳字符串，该 key 绑定到 timerCount를 사용하세요:

   으아악

2. 타이머를 calls 上的观察程序中，使用 setInterval 启动周期性计时器。在启动新计时器之前以及卸载组件时，请务必使用 clearInterval에 중지하세요.

   으아악

3. 현재 위치는 timerCount 上的观察程序正在有效地实现 setInterval입니다. 2단계의 코드가 이 코드를 제거하므로 이 코드를 제거하십시오.

   으아악

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

   으아악

데모