I created a quiz application using Vue where each question has its own time limit. I implemented a countdown feature with a watcher to display the remaining time on the webpage. However, I encountered an issue when updating the time limit for the next question - the countdown would end prematurely. How can I modify the watcher to update the time limit seamlessly without disrupting the ongoing countdown?
watch: {
timerEnabled(value) {
if (value) {
setTimeout(() => {
this.timeLimit--;
}, 1000);
}
},
timeLimit: {
handler(value) {
if (value >= 0 && this.timerEnabled) {
setTimeout(() => {
this.timeLimit--;
}, 1000);
}
else{
// Update the timer for the next question and proceed to the next one
}
}
}
}