Can someone help me, I've been trying for three days and I can not finish this part ....
Jun 10, 2019
3
Level 1
Vue.js countdown timer doens't work
My problem is in showing the values of the object. The table shows the tasks and the remaining time to finish. But it does not update the countdown timer ... The values are in an Object in Task ID, for example: Object {1: "4017 D 13 H 2 M 49 S", 2: "0 D 0 H 0 M 0 S", ...} This object should always be updated to show the remaining time, but in the table where I show the object the same is only with the first value, without updating the timer.
<template>
...
<table class="table" style="text-align: center">
<thead>
<tr>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">...</th>
<th scope="col">Time Left</th>
</tr>
</thead>
<tbody>
<tr class="table-warning" v-for="task in tasks" :key="task.id">
<th scope="row">{{task.id}}</th>
<th>{{task.description}}</th>
<th>{{task.created_at}}</th>
<th>{{task.redline}}</th>
<th>{{showLeft[task.id]}}</th>
</tbody>
</table>
...
</template>
<script>
export default {
// variables declaration
data() {
return {
user: [],
tasks: [],
numTasks: "",
currentTime: [],
showLeft: {}
};
},
created() {
// ProgressBar animation starts
this.$Progress.start();
// Get data from server
axios.get("/user/name/data").then(response => {
this.user = response.data;
axios.get(`/user/missingTaskNum/data`).then(response => {
this.numTasks = response.data;
axios.get(`/user/missingTask/data`).then(response => {
this.tasks = response.data;
// Call function that will calculate time left
this.updateCurrentTime();
// ProgressBar animation stops
this.$Progress.finish();
});
});
});
},
mounted() {
// start timer to refresh function every 1 sec
this.interval = setInterval(() => {
this.updateCurrentTime();
}, 1000);
},
methods: {
updateCurrentTime: function() {
var now = new Date().getTime();
for (let i = 0; i < this.tasks.length; i++) {
this.currentTime[this.tasks[i].id] = new Date(this.tasks[i].redline) - now;
if (this.currentTime[this.tasks[i].id] < 0) {
this.$Progress.start();
this.$Progress.finish();
console.log("EXPIROU ID: " + this.tasks[i].id);
} else {
var days = Math.floor(
this.currentTime[this.tasks[i].id] / (1000 * 60 * 60 * 24)
);
var hours = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60 * 60 * 24)) /
(1000 * 60 * 60)
);
var minutes = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60 * 60)) /
(1000 * 60)
);
var seconds = Math.floor(
(this.currentTime[this.tasks[i].id] % (1000 * 60)) / 1000
);
this.showLeft[this.tasks[i].id] =
days + " D " + hours + " H " + minutes + " M " + seconds + " S ";
}
}
console.log(this.showLeft);
}
},
beforeDestroy() {
clearInterval(this.interval);
}
};
</script>
Please or to participate in this conversation.