Vue.js 配列: 各オブジェクトの待機時間を追跡する

Question

コンテキストとして、着信通話と各通話の待ち時間を示す表を用意します。データ配列は次のようになります:

リーリー

各オブジェクトに setTimeout を割り当てる方法を見つけようとしていますが、完全に迷っています。

これまでのところ、オブザーバーを介してカウンターを作成できることがわかりましたが、これはもちろん「グローバル」カウンターとしてのみ機能します。

リーリー

関数を使用して各オブジェクトにカウンターを表示する方法はありますか?私は次のようなことを考えていました:

リーリー

さらに、待機時間を HH:mm:ss の形式で返したいと考えています。

Answer 1

1 つの解決策は、{{ showWaitingTime(call.created_at) }} を <span> でラップすることです。これは keyed# です## を timerCount に設定し、timerCount が変更されたときに <span> が再レンダリングされるようにします (これにより、showWaitingTime が再度呼び出され、新しい値が計算されます)時間文字列): p>

1. テンプレートで、

   <span> を使用して、timerCount: にバインドされた key でタイムスタンプ文字列をラップします。 リーリー

2. calls のオブザーバーで、setInterval を使用して定期タイマーを開始します。新しいタイマーを開始する前、およびコンポーネントをアンインストールするときは、必ず clearInterval を使用してタイマーを停止してください。 リーリー

3. timerCount のウォッチャーは、setInterval を効果的に実装しています。ステップ 2 のコードによってこのコードが削除されるため、このコードを削除します。 リーリー

4. showWaitingTime() で、指定された時間と現在の時間の差に基づいて HH:mm:ss: を計算します。 リーリー

＃＃＃＃＃＃デモ＃＃＃＃＃＃