Creating a countdown in v-for for each result - vue.js

Question

I have a loop, in which I get several result from my API call.
Each of them has an property called processing_time that shows how many seconds it has left until something happens.
How can I implement the countdown for each interval?
Here is my <progressbar> component which needs a value for initially displaying the progress (I need it to be dynamic)
<progress-bar :options="options"
:value="data.properties.processing_time"
/>
<span class="progress-bar-seconds"
>{{ data.properties.processing_time }} Seconds left
...</span>
I feel like I need to use computed but I don't exactly know how to do it.

Answer 1

A computed prop is probably not the best solution, since you need to change the timer value locally. I recommend using a local copy that is updated periodically:
Create a local data property (a ref).
Copy the value prop to the local data prop upon mounting.
Use setInterval to periodically decrement the value.
<template>
<div>
<span class="progress-bar-seconds">{{ seconds }} Seconds left ...</span>
</div>
</template>
<script>
import { ref, onMounted, onUnmounted } from 'vue'
export default {
props: {
value: {
type: Number,
default: 0,
required: true,
},
},
setup(props) {
const seconds = ref(0) // 1️⃣
let _timerId = null
onMounted(() => {
seconds.value = props.value // 2️⃣
if (seconds.value > 0) {
// 3️⃣
_timerId = setInterval(() => {
seconds.value--
if (seconds.value <= 0) {
clearInterval(_timerId)
}
}, 1000)
}
})
onUnmounted(() => clearInterval(_timerId))
return { seconds }
}
}
</script>
demo