Vue.js加载和渲染时对象值的未定义错误

Question

OK.我不是一个完全的新手，确实有一些 Vue xp，但这困扰着我。我错过了什么真正明显的东西。

我在挂载的方法中通过 ajax 调用加载了一个对象：

job: {
"title": "value",  
"location": {
"name":"HONG KONG"
}
}

当我称{{ job.title }}都很好。当我调用 {{ job.location.name }} 时，我有一个未定义的错误，但值呈现。当我调用 {{ job.location }} 时，我得到了 json 对象，因此它被定义。

啊！我敢肯定这真的很简单，但不可能明白为什么这不像它应该的那样简单。

//附加

这是我的整个 Vue 类

const router = new VueRouter({
mode: 'history',
routes: []
});
const app = new Vue( {
router,
el: '#app',
data: {
job: {}
},
mounted: function () {
var vm = this
jQuery.ajax({
url: 'https://xxx' + this.jobId,
method: 'GET',
success: function (data) {
vm.job = data;
},
error: function (error) {
console.log(error);
}
});
},
computed: {
jobId: function() {
return this.$route.query.gh_jid
}
}
})

Answer 1

当你的组件渲染时，它会尝试从job.location.name获取值，但在ajax 请求完成之前location未定义。所以我想错误有点Cannot read property 'name' of undefined.

要解决此问题，您可以定义computed属性locationName，例如，当还没有加载的作业对象时返回空字符串：

computed:{
//...
locationName() {
return this.job.location ? this.job.location.name : '';
}
}

或者您可以定义location的计算，如果没有位置，则返回空对象，或者您可以将空位置对象添加到初始数据中(如果您确定您的 API 响应始终具有location(，就像job: { location: {}}所有方法都会解决您的问题。

还有一种方法可以使用模板中的v-if指令来修复它：

<div v-if="job.location">
{{ job.location.name }}
<!-- other location related stuff -->
</div>

Answer 2

适合您的 ES6 解决方案：

computed: {
getJobName(){
return this.job?.location.name
}
}

可选链接