为什么我变得未定义不是Vue JS中的对象错误

Question

因此，我有一个vue应用程序，我在由django组成的单个页面.html上由几个组件组成。 我现在正在尝试使用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过滤器中的log语句正确记录了持续时间。

Answer 1

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

过滤器应为纯​​函数，而不应依赖this 。

而是将您的durationReadable函数移到方法部分。 在那里，你可以参考this 。

然后修改模板以使用方法而不是过滤器：

{{ durationReadable(stage_execution.duration_millis) }}

我希望这有帮助。

Answer 2

每当您引用this.someVariable ，Vue都希望从预定义的data属性中读取此内容。 例，

data: () => {
   return {
    milliseconds: undefined
  }
}

现在，此this.milliseconds将可以访问。

Answer 3

您不应该在durationReadable内使用this 。 您只需要使用let和const来声明变量。

durationReadable (duration) {
    const milliseconds = parseInt((duration%1000)/100)
    const seconds = parseInt((duration/1000)%60)
    let minutes = parseInt((duration/(1000*60))%60)
    // ... etc.
}