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

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 继续显示属性未定义错误，我的单元测试也失败了错误。

<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，第二次渲染将成功完成。在返回数据之前，初始渲染失败。