为什么我得到 undefined 不是 vue js 中的对象错误

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',      };    },  },注意：durationReadable 过滤器中的日志语句正确记录了持续时间。

Answer 1

你不应该this在durationReadable. 你只需要使用let和const声明你的变量。

durationReadable (duration) {

    const milliseconds = parseInt((duration%1000)/100)

    const seconds = parseInt((duration/1000)%60)

    let minutes = parseInt((duration/(1000*60))%60)

    // ... etc.

}

Answer 2

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

过滤器应该是纯函数而不是依赖于this.

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

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

{{ durationReadable(stage_execution.duration_millis) }}

我希望这有帮助。

Answer 3

任何时候引用this.someVariable，Vue 都希望从预定义的数据属性中读取它。例子，

data: () => {

   return {

    milliseconds: undefined

  }

}

现在this.milliseconds可以访问了。