javascript - 为什么我在 vue js 中遇到 undefined is not an object 错误

Question

所以我有一个在单页 .html 上编写的 vue 应用程序，由由几个组件组成的 django 提供服务。我现在尝试使用 Vue CLI 将这项工作转移到真正的 vue.js 项目中，我认为将我的组件从 django .html 页面移动到单个文件 vue 组件中是非常简单的。不幸的是，我的单个文件组件中的几乎每一行都会抛出错误(尽管我的整个应用程序及其所有组件都在 .html 中工作)，并且我很难解决这个问题。看起来从 vue 组件转换到单个文件组件需要一些工作。

我当前收到的错误是这样的:

[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating 'this.milliseconds = parseInt(duration % 1000 / 100)')"

由于我不太清楚的原因，当我使用 vue CLI 转移到单个文件组件时，每一行都会出错，直到我在每个变量之前添加“this”。我对为什么需要在过滤器方法中使用“this”知之甚少，但是当我删除它时，我得到:

[Vue warn]: Error in render: "ReferenceError: Can't find variable: milliseconds"

单个文件组件:

<template>
  <div emptyDiv>
    <h3> Stages </h3>
    <table :style="tableStyle">
      <tbody>
        <template v-for="item in jobs">
          <tr>
            <td v-for="stage_execution in item.stage_execution" :title="stage_execution.exec_node.name" :key="stage_execution.stage.name">
              <b><a :href="item.mongo_link + stage_execution.stage.name + '.txt'" style="color:black">{{ stage_execution.stage.name }}</a></b>
              <br>
              {{ stage_execution.duration_millis | durationReadable  }}
              <br>
              {{ stage_execution.status.name }}
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  data() {
    return {
      jobs: []
    }
  },
  computed: {
    tableStyle() {
      return {
        'background-color': '#f9f9f9',
        'border-color': '#C0C0C0',
        'padding': '8px',
        'width': '100%',
      };
    },
    emptyDiv() {
      return {
        'display': 'contents',
      };
    },
  },
  methods: {
    calculateDuration: function(time_start, time_end) {
      this.theDuration = moment.duration(time_end.diff(time_start))
      if (this.theDuration.seconds() == 0) {
        this.cleanDuration = "N/A"
      }
      else {
        this.cleanDuration = this.theDuration.hours() + " hrs " + this.theDuration.minutes() + " min " + this.theDuration.seconds() + " sec"
      }
      return this.cleanDuration
    }
  },
  filters: {
    durationReadable: function(duration) {
      console.log(parseInt(duration%1000)/100)   //this successfully logs the correct duration
      this.milliseconds = parseInt((duration%1000)/100)
      this.seconds = parseInt((duration/1000)%60)
      this.minutes = parseInt((duration/(1000*60))%60)
      if (this.minutes < 10) {
        this.minutes = '0' + this.minutes
      }
      if (this.seconds < 10){
        this.seconds = '0' + this.seconds
      }
      return this.minutes + " m " + this.seconds + " s " + this.milliseconds + ' ms'
    }
  },
  created() {
    this.binariesEndpoint = 'test.com'
    fetch(this.binariesEndpoint)
    .then(response => response.json())
    .then(body => {
      this.cleanStartTime = moment(body[0].time_start)
      console.log(body[0].time_start)
      this.cleanEndTime = moment(body[0].time_end)
      this.cleanDuration = this.calculateDuration(this.cleanStartTime, this.cleanEndTime)
      this.job_execs.push({
        'name': body[0].job.name,
        'build_id': body[0].build_id,
        'env': body[0].job.env,
        'time_start': this.cleanStartTime.format('LLL'),
        'time_end': this.cleanEndTime.format('LLL'),
        'duration': this.cleanDuration,
      })
    console.log(body[0].job.name)
    })
    .catch( err => {
      console.log('Error Fetching:', this.binariesEndpoint, err);
      return { 'failure': this.binariesEndpoint, 'reason': err };
    })
  },
};
</script>

注意:durationReadable 过滤器中的日志语句正确记录持续时间。

Answer 1

您不能在过滤器中引用this。

过滤器应该是纯函数，并且不依赖于 this。

相反，请将您的 durationReadable 函数移至 methods 部分。您可以在那里引用this。

然后修改您的模板以使用该方法而不是过滤器:

{{ durationReadable(stage_execution.duration_millis) }}

我希望这会有所帮助。