我的 vue.js 应用中有几个组件遵循以下结构，它们都抛出了相同的错误。

TypeError: Cannot read property 'id' of undefined

我以为用 <template :v-if="jobs"> 或 <template :v-if="jobs[0].id"> 包装 {{ 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 。但是，这不是一个令人满意的解决方案，因为我仍然不知道为什么它会在原始代码中抛出错误，并且我不相信此解决方案适用于完整数组（包含多个作业）。