My current task involves setting up a button event in Vue 3 that triggers a setTimeout countdown on the button before redirecting to another page. The event function has a conditional statement that initiates a countdown from 5 to 0 as long as the countValue is greater than 0. The recursive nature of the setTimeout function ensures that it calls the goHome() function repeatedly to execute the countdown. Once the countValue reaches 0, the router.push method is used to navigate to a different page. However, I am facing an issue where the countdown immediately jumps from 5 to 4 when the button is pressed. I would like to introduce a brief delay at the start of the countdown, so it does not instantly drop to 4. How can I resolve this?
Below is the code snippet I have been working on:
Template:
<div>
<button @click="goHome" type="button" :disabled="disabledOnCount === true ? true : false">Go Home in {{ countValue }} seconds</button>
</div>
Script:
import { ref } from '@vue/reactivity'
const countValue = ref(5)
const goHome = () => {
if (countValue.value > 0) {
disabledOnCount.value = true
countValue.value -= 1
setTimeout(() => {
goHome()
if (countValue.value === 0) {
router.push({ name: 'home' })
}
}, 1000)
}
}