为什么我得到 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) {&nbsp; &nbsp; const milliseconds = parseInt((duration%1000)/100)&nbsp; &nbsp; const seconds = parseInt((duration/1000)%60)&nbsp; &nbsp; let minutes = parseInt((duration/(1000*60))%60)&nbsp; &nbsp; // ... etc.}

Answer 2

您不能this在过滤器中引用。过滤器应该是纯函数而不是依赖于this.相反，将您的durationReadable函数移动到方法部分。在那里你可以参考this。然后修改您的模板以使用该方法而不是过滤器：{{&nbsp;durationReadable(stage_execution.duration_millis)&nbsp;}}我希望这有帮助。

Answer 3

任何时候引用this.someVariable，Vue 都希望从预定义的数据属性中读取它。例子，data: () => {&nbsp; &nbsp;return {&nbsp; &nbsp; milliseconds: undefined&nbsp; }}现在this.milliseconds可以访问了。