javascript - 为什么我的 vue.js 组件的属性未定义?
问题描述
我的 vue.js 应用程序中有一些组件遵循以下结构,它们都抛出相同的错误。
TypeError: Cannot read property 'id' of undefined
我认为这将是一个简单的解决方法,{{ jobs[0].id }}
用<template :v-if="jobs">
or包装<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
从模板调用。但是,这不是一个令人满意的解决方案,因为我仍然不知道为什么它会在原始代码中引发错误,而且我不相信这个解决方案适用于一个完整的数组(不止一项工作)。
解决方案
您提到您已经尝试过<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
正如现在填充的那样,第二次渲染将成功完成。在返回数据之前,初始渲染失败。
推荐阅读
- javascript - ASP .NET | JQuery:将变量传递给javascript函数
- javascript - 为什么我在 JScript 中将对象序列化为 JSON 后会丢失某些字段的值?
- postgresql - PostGIS - 创建椭圆
- php - 如何从 codeigniter 控制器获取 id
- android - kotlin 插件不起作用
- c# - 如果多次使用 ASP.NET,使用 HttpClient Post Async 会出错
- python - 使用 Python 对暗边进行边缘检测
- sorting - 如何按时间字段降序查询elasticsearch数据
- php - php查询中的排序数字
- python - 如何在一个文件中模拟日期时间?