好啊我不是一个完全的新手,确实有一些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相关问答推荐

VueUse onClickOutside不支持右键单击

VueI18n 无法读取或更改组合 API 中的区域设置

当用户在嵌套路由中时激活链接

nuxt.js auth 始终重定向到登录,而不是允许转到带有 auth: false 的页面,

Nuxt3-Vue中的useRoute和useRouter有什么区别

JSDoc 单文件 Vue 组件

VueJS 将 HTML 打印到页面

webpack模块解析失败意外字符'@'

Amazon EC2 错误:监听 EACCES 0.0.0.0:80

验证子组件Vue vee-validate

使用 Blade/Mustache 模板混合 Laravel 和 Vue.Js

带有子菜单的 Vuetify 导航抽屉

交换数组项

如何在 Vue.js 应用程序中正确下载 Excel 文件?

Vuejs css 范围性能

NPM:403 禁止 - PUT http://registry.npmjs.org/[package-name] - 禁止

VS Code - 在 .vue 文件中启用 autoClosingTags 选项

为什么 router.currentRoute.path 没有react?

VueJS 按键查找元素

Vuetify v-data-table 固定标题不起作用