<template>
<div class="parent">
<div class="container">
<h1 class="start" @click="start_timer">
{{ timerText }}
</h1>
</div>
</div>
</template>
<script>
import Timer from 'easytimer.js';
export default {
name: 'GameStart',
components: {
},
data() {
return {
timerText: "Start"
}
},
methods: {
start_timer() {
var timer = new Timer();
timer.start({countdown: true, startValues: {seconds: 4}});
timer.addEventListener('secondsUpdated', function () {
this.timerText = timer.getTimeValues()['seconds'].toString();
console.log(this.timerText);
})
timer.addEventListener('targetAchieved', function () {
console.log('complete');
this.timerText = "COMPLETE!!";
});
}
},
mounted() {
// var timer = new Timer();
// timer.start();
// timer.addEventListener('secondsUpdated', function () {
// console.log(timer.getTimeValues().toString());
// });
}
}
</script>
<style>
.parent {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.start {
color: crimson;
font-size: 50px;
}
</style>
This code snippet represents a component in my vue.js project specifically designed for a mobile game. Upon clicking the 'start' h1 tag, the start_timer function is executed. Although I attempt to update the timerText variable in the start_timer function with countdown values (3, 2, 1), the changes are not reflected in the window display.
How can I modify the logic to implement a visible three-second countdown on the screen?