У меня есть массив людей, выполняющих определенную задачу, у каждого из них есть таймер, который отсчитывает момент, когда они выбирают задачу, моя проблема в том, как показать таймер на DOM, у меня вроде способ вывести его на консоль уже;
//in my methods: the time calc takes in two arguments to calculate the countdown
},
data() {
return {
id: this.$route.params.singletask,
loading: false,
task: {},
second: 1000,
time: "Time Remaining:",
minute: this.second * 60,
hour: this.minute * 60,
day: this.hour * 24,
seconds: 0,
minutes: 0,
hours: 0,
days: 0,
image: "",
centerDialogVisible: false,
task_states: []
};
},
methods: {
async viewTask() {
this.loading = true;
try {
let response = await this.$http.get("/task/" + this.id + "/show");
console.log(response);
this.task = response.data.data;
console.log(this.task);
this.task_states = response.data.data.task_states;
this.task_states.forEach((task, i) => {
task.obj = {};
});
console.log(this.task_states);
// to calculate countdown for each taskState
this.task_states.forEach((taskState, index) => {
let countDown = new Date(taskState.end_date).getTime();
let x = setInterval(() => {
let now = new Date().getTime();
let distance = countDown - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
let minutes = Math.floor(
(distance % (1000 * 60 * 60)) / (1000 * 60)
);
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// console.log(second, hour, day, minute);
// return seconds, hours, days, minutes;
taskState.obj.seconds = seconds;
taskState.hours = hours;
taskState.obj.days = days;
taskState.obj.minutes = minutes;
console.log(taskState.obj.seconds);
//do something later when date is reached
if (distance < 0) {
clearInterval(x);
this.time = "Time Ellapsed";
}
}, 1000);
// this.task_states[index].obj = obj;
// console.log(this.task_states);
});
} catch (err) {
console.log(err);
}
this.loading = false;
},
в HTML у меня есть что-то вроде этого
<div class="d-flex" v-if="task_state.obj">
<h6>{{ time }}</h6>
<ul class="my-auto ml-1">
<li>
<span class="time" id="days">
<b>{{ task_state.obj.days }}</b> d
</span>
</li>
<li>
<span class="time" id="hours">
<b>{{ task_state.obj.hours }}</b> h
</span>
</li>
<li>
<span class="time" id="minutes">
<b>{{ task_state.obj.minutes }}</b> min
</span>
</li>
<li>
<span class="time" id="seconds">
<b>{{ task_state.obj.seconds}}</b> sec
</span>
</li>
</ul>
</div>
</div>
он успешно прибывает на консоль, но я не знаю как go показать его на DOM