为什么我的 vue.js 组件中没有实时更新时间？

Question

现在我的组件正在工作，它会在给定time_start 和time_end 时显示持续时间，但如果没有给出time_end，我会尝试显示实时持续时间。所有这些逻辑都发生在 calculateDuration 方法内部，但我必须创建另一个包装方法 liveDuration 以保持每秒更新 calculateDuration。使用下面的代码，我看到控制台中每秒都会出现错误

Uncaught SyntaxError: Unexpected identifier

但如果我点击控制台中的错误，它会显示正确的持续时间

0 hrs 1 min 7 sec

但是，模板中呈现的只是一个静态数字，例如 5 或 7，它们永远不会更新，我不确定这些数字是从哪里来的。

如何更新下面的代码，以便模板中的持续时间每秒实时更新？

<template>
  <div class="executions">
    <h3>Recent Jobs</h3>
    <table>
      <template>
        <tr>
          <td><b>Job</b></td>
          <td><b>Duration</b></td>
          <td><b>Result</b></td>
        </tr>
        <tr>
          <td>{{ item.id }}</td>
          <td>
          <template v-if="item.duration == 'N/A'">
            {{ liveUpdate(item.time_start) }}
          </template>
          <template v-else>
            {{ item.duration }}
          </template>
          </td>
          <td>{{ item.status }}</td>
        </tr>
      </template>
    </table>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "Executions",
  data() {
    return {
      job_execs: []
    };
  },
  methods: {
    calculateDuration: function(time_start, time_end) {
      let duration = "N/A"
      if (time_start && time_end) {
        time_start = moment(time_start)
        time_end = moment(time_end)
        duration = moment.duration(time_end.diff(time_start));
        if (duration.seconds() == 0) {
          duration = "N/A";
        } else {
          duration =
          duration.hours() +
          " hrs " +
          duration.minutes() +
          " min " +
          duration.seconds() +
          " sec";
        }
        time_start = time_start.format("LLL")
        time_end = time_end.format("LLL")
      }
      if (time_start == null) {
        time_start = "N/A";
      }
      else {
        time_start = moment(time_start).format("LLL")
      }
      if (time_end == null) {
        time_end = "N/A";
      }
      else {
        time_end = moment(time_end).format("LLL")
      }
      return {time_start, time_end, duration}
    },
    liveDuration: function(time_start) {
      let now = moment();
      let duration = "N/A"
      console.log(time_start)
      if (time_start) {
        console.log(time_start)
        time_start = moment(time_start)
        console.log(time_start)
        let time_current = moment()
        console.log(time_current)
        duration = moment.duration(time_current.diff(time_start));
        console.log(duration)
        if (duration.seconds() == 0) {
          duration = "N/A";
        } else {
          duration =
          duration.hours() +
          " hrs " +
          duration.minutes() +
          " min " +
          duration.seconds() +
          " sec";
        }
      }
      return duration
    },
    liveUpdate: function(time_start) {
      let that=this;
      let time_live = setInterval(that.liveDuration(time_start), 1000);
      return time_live
    },
  },
  created() {
    this.jobExecEndpoint = 'http://test'
    fetch(this.jobExecEndpoint)
      .then(response => response.json())
      .then(body => {
        for (let i = 0; i < body.length; i++) {
          let {time_start, time_end, duration} = this.calculateDuration(body[i].time_start, body[i].time_end);
          this.job_execs.push({
            id: body[i].id,
            time_start: time_start,
            time_end: time_end,
            duration: duration,
            status: body[i].status.name,
          });
        }
      })
      .catch(err => {
        console.log("Error Fetching:", this.jobExecEndpoint, err);
        return { failure: this.jobExecEndpoint, reason: err };
      });
  }
};
</script>

Answer 1

我认为主要问题在于 liveUpdate 方法返回的值。它返回一个 setInterval 处理程序，这不是您要显示的持续时间。 第二个问题是，即使方法返回正确的值，它也不会自动更新。例如，如果您希望它每 1 秒更新一次，您应该在挂载的钩子中使用 setInterval 并在每个间隔更新数据。更新数据会自动响应式地更新视图。