Как показать обновленное значение из массива

Моя проблема заключается в отображении значений объекта. В таблице указаны задачи и оставшееся время до их выполнения. Но не обновляет таймер обратного отсчета... Значения находятся в объекте в идентификаторе задачи, например: Объект {1: "4017 D 13 H 2 M 49 S", 2: "0 D 0 H 0 M 0 S", ...} Этот объект должен всегда обновляться, чтобы показывать оставшееся время, но в таблице, где я показываю объект, то же самое только с первым значением, без обновления таймера.

 <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.info("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.info(this.showLeft);
    }
  },

  beforeDestroy() {
    clearInterval(this.interval);
  }
};

</script>

Пожалуйста, включите код в вопрос, вместо того, чтобы пытаться обмануть систему, чтобы она разрешила вам ссылаться на совместное использование кодов, добавив текст там, где должен быть код.

apokryfos 10.06.2019 10:57

Простите за это..

Marcelo Dias 10.06.2019 12:07
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Оживление вашего приложения Laravel: Понимание режима обслуживания
Оживление вашего приложения Laravel: Понимание режима обслуживания
Здравствуйте, разработчики! В сегодняшней статье мы рассмотрим важный аспект управления приложениями, который часто упускается из виду в суете...
Коллекции в Laravel более простым способом
Коллекции в Laravel более простым способом
Привет, читатели, сегодня мы узнаем о коллекциях. В Laravel коллекции - это способ манипулировать массивами и играть с массивами данных. Благодаря...
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Поиск нового уровня в Laravel с помощью MeiliSearch и Scout
Laravel Scout - это популярный пакет, который предоставляет простой и удобный способ добавить полнотекстовый поиск в ваше приложение Laravel. Он...
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
Освоение архитектуры микросервисов с Laravel: Лучшие практики, преимущества и советы для разработчиков
В последние годы архитектура микросервисов приобрела популярность как способ построения масштабируемых и гибких приложений. Laravel , популярный PHP...
Как построить CRUD-приложение в Laravel
Как построить CRUD-приложение в Laravel
Laravel - это популярный PHP-фреймворк, который позволяет быстро и легко создавать веб-приложения. Одной из наиболее распространенных задач в...
5
2
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы столкнулись с одним из предупреждений об обнаружении изменений, описанным здесь:

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Предостережения

Конкретно в этой строке:

this.showLeft[this.tasks[i].id] =
    days + " D " + hours + " H " + minutes + " M " + seconds + " S ";

Объект this.showLeft пуст, когда он создается внутри data, поэтому у него не будет никаких реактивных свойств. Он отлично работает, если вы измените его на это:

this.$set(
    this.showLeft,
    this.tasks[i].id,
    days + " D " + hours + " H " + minutes + " M " + seconds + " S "
)

Это говорит Vue добавить реактивное свойство к showLeft, чтобы пользовательский интерфейс обновлялся при его изменении.

Альтернативой может быть создание нового объекта каждый раз:

// Somewhere near the top of updateCurrentTime
const showLeft = {};

// ... set values on showLeft instead of this.showLeft

this.showLeft = showLeft

Лично я думаю, что лучше бы использовал для этого вычисляемые свойства, а не пытался делать все внутри updateCurrentTime. Я не могу быть более конкретным, учитывая, что код неполный.

Спасибо, работает работает отлично! А за подсказку попробую реализовать этот метод!

Marcelo Dias 11.06.2019 09:25

Другие вопросы по теме