如何显示数组中的刷新值

Posted 2023-02-22

【中文标题】如何显示数组中的刷新值

【英文标题】：How to show refreshed value from an array

【发布时间】：2019-10-24 16:02:48

【问题描述】：

我的问题在于显示对象的值。 该表显示了任务和完成的剩余时间。但它不会更新倒数计时器...... 值在Task ID中的一个Object中，例如： 对象 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.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>

【问题讨论】：

请在问题中包含代码，而不是试图通过在代码应该去的地方添加文本来欺骗系统允许您链接到代码共享。

对不起..

【参考方案1】：

您遇到了此处概述的变更检测警告之一：

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

具体在这一行：

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 添加一个响应式属性，这样 UI 会在它发生变化时更新。

另一种方法是每次都创建一个新对象：

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

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

this.showLeft = showLeft

我个人认为我会为此更多地使用计算属性，而不是尝试在updateCurrentTime 中做所有事情。鉴于代码不完整，我无法更具体。

【讨论】：

谢谢，它工作得很好！对于提示，我将尝试实现该方法！