Below you can see that the timer is supposed to update the msg after 90 seconds have passed, but instead it updates almost instantly. I am familiar with setInterval and watch, so I'm puzzled as to why the code isn't functioning correctly.
All we are doing here is checking if the counter is above 0, and if it is, spawning another timeout to trigger the current function again, creating a loop of sorts.
var view = new Vue({
el: '#app',
data: {
countDown: 90,
msg: "There's still time.."
},
methods: {
timer: function () {
if (this.countDown > 0) {
setTimeout(() => {
this.countDown--
this.timer()
}, 1000);
}
else if(this.countDown === 0);
{
this.msg = 'You Ran Outta Time!'
}
}
},
created () {
this.timer();
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vue test</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
</div>
</body>
</html>