Question

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

2018-10-16

16122

javascript vue.js

好的。我不是一个完全的新手，确实有一些 Vue 经验，但这让我很烦。我错过了什么真正明显的东西。

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

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 未定义。所以我猜错误是 无法读取未定义的属性“名称” 。

要解决此问题，您可以定义 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
  }
}

可选链接