OK. I'm not a total newbie and do have some Vue xp but this is bugging me. What really obvious thing am I missing.

I have an object loaded via an ajax call inside a mounted method:

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

When I call {{ job.title }} all good. When I call {{ job.location.name }} I have an undefined error but the value renders. When I call {{ job.location }} I get the json object so it is defined.

Aaargh! I'm sure it's really simple but can't possibly see why this isn't as straight forward as it should be.

// Additional

This is my entire Vue class

    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
        }
      }
    })

OK. I'm not a total newbie and do have some Vue xp but this is bugging me. What really obvious thing am I missing.

I have an object loaded via an ajax call inside a mounted method:

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

When I call {{ job.title }} all good. When I call {{ job.location.name }} I have an undefined error but the value renders. When I call {{ job.location }} I get the json object so it is defined.

Aaargh! I'm sure it's really simple but can't possibly see why this isn't as straight forward as it should be.

// Additional

This is my entire Vue class

    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
        }
      }
    })

• javascript
• vue.js

• Everything is alright in this snippet you provided. The error should be somewhere else. Provide more code – Thomas Commented Oct 16, 2018 at 9:05
• Are you define 'job.location.name' in your vue Instance of data ? I'm not sure is it that error is appeared before your ajax request, so provide more code – Simon.Lay Commented Oct 16, 2018 at 9:19
• I've added some more code. As you can see I have defined "job" as an empty object which I've done as standard loads of times. Thanks – Dr.ifle Commented Oct 16, 2018 at 9:32
• try using vm.$set(job, data) instead of vm.job = data; – Sam Commented Oct 16, 2018 at 9:39

2 Answers 2

When your component renders it tries to get value from job.location.name but location is undefined before ajax request is completed. So I guess error is kind of Cannot read property 'name' of undefined.

To fix this you can define computed property locationName and return, for example, empty string when there is no loaded job object yet:

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

Or you can define computed for location and return empty object if there is no location, or you can just add empty location object to your initial data(if you are sure that your API response always has location) like job: { location: {}} all ways will fix your issue.

Also there is a way to fix it with v-if directive in your template:

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

An ES6 solution for you:

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

Optional Chaining