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

Question

好的。我不是一个完全的新手，确实有一些 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>