Question

我的vue.js应用程序中有一些组件遵循以下结构，并且都引发相同的错误。

TypeError: Cannot read property 'id' of undefined

我认为通过用{{ jobs[0].id }}或<template :v-if="jobs">包装<template :v-if="jobs[0].id">可以很容易地解决这个问题，因为其他大多数stackoverflow帖子都指出这是一种解决方案，但这确实会导致错误走开。有趣的是，下面的代码将所有数据（包括id）呈现到页面上都很好，页面上没有数据丢失，但是console.log继续显示属性undefined错误，并且我的单元测试因相同而失败错误。

<template>
  <div class="emptyDiv">
    <h3>
      Latest Build -
      <router-link:to="{name: 'job_details'}">
      {{ jobs[0].id }}
      </router-link>
    </h3>
  </div>
<template>

<script>
export default {
  name: "Stages",
  data() {
    return {
      jobs: []
    };
  },
  created() {
    this.JobExecEndpoint =
    process.env.VUE_APP_TEST_URL +
    "/api/v2/job/"
    fetch(this.JobExecEndpoint)
    .then(response => response.json())
    .then(body => {
      this.cleanStartTime = moment(body[0].time_start);
      this.cleanEndTime = moment(body[0].time_end);
      this.cleanDuration = this.calculateDuration(
        this.cleanStartTime,
        this.cleanEndTime
        );
      this.jobs.push({
        name: body[0].job.name,
        id: body[0].id,
        env: body[0].job.env,
        time_start: this.cleanStartTime.format("LLL"),
        time_end: this.cleanEndTime.format("LLL"),
        duration: this.cleanDuration,
        status: body[0].status.name,
        job: body[0].job,
      });
    })
    .catch(err => {
      console.log("Error Fetching:", this.JobExecEndpoint, err);
      return { failure: this.JobExecEndpoint, reason: err };
    });
  }
};
</script>

我在这里做错了什么？我已经连续10个小时试图解决这些错误，却无法解决。

更新：

我能够摆脱这些错误并通过添加来通过单元测试

  .then(() => {
  this.new_id = this.jobs[0].id
  })

到创建的块并在数据下添加new_id =''

，然后从模板调用new_id。但是，这不是一个令人满意的解决方案，因为我仍然不知道为什么它会在原始代码中引发错误，并且我不认为该解决方案可以在一个完整的数组（一项以上的工作）中使用。

Answer 1

您提到您曾经尝试过<template :v-if="jobs">和<template :v-if="jobs[0].id">，但是这两个都不能解决问题。首先，v-if之前的冒号是错误的，我认为这只是问题中的错字。其次，这两个条件均未真正针对所讨论的undefined值。

首先让我们考虑一下：

<template v-if="jobs">

将空数组视为真实，因此此检查将始终通过。

然后这个：

<template v-if="jobs[0].id">

这与原始代码有完全相同的问题，它试图访问第一个元素的id属性，而第一个元素是undefined。您无法访问undefined的属性。

您需要检查第一个元素是否存在，所以类似这样：

<template v-if="jobs[0]">

或者：

<template v-if="jobs.length">

或将{{ jobs[0].id }}重写为：

{{ jobs[0] && jobs[0].id }}

它似乎正确呈现的原因是从服务器返回数据后页面将重新呈现。随着jobs的填充，第二次渲染将成功完成。是返回数据之前的初始渲染失败。

为什么我的vue.js组件无法定义属性？

1 个答案: