好啊我不是一个完全的新手,确实有一些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
        }
      }
    })

推荐答案

当组件before ajax request is completedtry 从job.location.name获取未定义的值时,它将从location获取.所以我猜误差是Cannot read property 'name' of undefined.

要解决此问题,可以定义computed属性locationName,并在没有加载作业(job)对象时返回空字符串:

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

或者,您可以定义computed for location并在没有位置的情况下返回空对象,或者您可以将空位置对象添加到初始数据中(如果您确定API响应始终有location),比如job: { location: {}},所有方法都可以解决问题.

还有一种方法可以通过模板中的v-if指令来修复它:

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

Vue.js相关问答推荐

如何将$validator实例注入到使用组合API语法的Vue2.7应用程序中

Vue 3:插槽属性 - 可以通过 props 传递数据吗?

组合 API | Vue 路由参数没有被监视

vue 计算的 ant watch 不会在嵌套属性更改时触发

JSDoc 单文件 Vue 组件

在 Vuex Store 模块中使用 Vue.js 插件

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

如何在 vuejs 自定义指令中传递动态参数

我可以从手表调用方法并安装吗?

使用 azure devops 发布管道部署 Vue.js 应用程序

如何在 Node.js 服务器上部署 Vue.js 应用程序

ionic - `slot` 属性已被弃用 - eslint-plugin-vue

如何在 Vue 类组件中定义过滤器?

Vuetify Jest 未知自定义元素

如何在两个属性上使用 Vue/Vuetify 自动完成过滤器?

使用 Vue.js 获取所有选中复选框的列表

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

Vue.JS 2.0 修改不相关数据时速度慢

超过最大调用堆栈大小 Vuetify

将鼠标悬停在 TailwindCSS 中的 div 上时显示按钮