Tech Programing


Waiting time counter for each object in array Vue js

1 min read

To get in context, I have a table that shows incoming calls and the waiting time for every call. The data array looks like:

      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,

I’m trying to figure out how to assign a setTimeout for each object, but I’m completely lost.

So far, I found that a counter can be made through a watcher, but of course this only acts as a “global” counter.

watch: {
        timerCount: {
            handler (value) {
                if (value > 0) {
                    setTimeout(() => {
                    }, 1000)
            immediate: true // This ensures the watcher is triggered upon creation

Is there a way to use a function to show a counter on each object? I was thinking in something like this:

    <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
    methods: {
        showWaitingTime (created_at) {
            // get diff in seconds between created_at and now
            // do something here with a timeOut() to increment the object property...

In addition, I would like to return the waiting time in HH:mm:ss format.

Source link



發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *