таймер обратного отсчета с Nuxt - PullRequest
0 голосов
/ 02 апреля 2020

У меня есть массив людей, выполняющих определенную задачу, у каждого из них есть таймер, который отсчитывает момент, когда они выбирают задачу, моя проблема в том, как показать таймер на 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...