Vue.js undefined error on object value when loaded and rendered

Question

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

Everything is alright in this snippet you provided. The error should be somewhere else. Provide more code — Thomas
– 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
– 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
– Dr.ifle, Commented Oct 16, 2018 at 9:32

Max Sinev · Accepted Answer · 2018-10-16 10:01:57Z

14

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>

edited Oct 16, 2018 at 10:01

answered Oct 16, 2018 at 9:55

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dr.ifle Over a year ago

Thanks for the response. I understand the logic of the answer but it doesn't account for job.title being available and rendering without issue.

Max Sinev Over a year ago

@Dr.ifle title works because it's property of job object that exists always and job.title just returns undefined if there is no title prop without any error. Your location is nested object and error is related to location object properties.

Dr.ifle Over a year ago

Thanks. That does make sense and indeed works. On the whole I guess it would be nice to have some way of not rendering until the data was mounted.

Max Sinev Over a year ago

Yeah, you can avoid rendering body of your component with v-if="job" as well and define job: null in data, so you can safely use all properties within conditional block inside template...but if you will have some logic in component related to properties of nested objects you still have to do some null checking in code.

juan carlos peña cabrera Over a year ago

Nombre: <strong>{{ empleado?.nombre }}</strong> and how can i do this

Riza Khan · Accepted Answer · 2021-06-06 01:35:03Z

0

An ES6 solution for you:

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

Optional Chaining

answered Jun 6, 2021 at 1:35

Riza Khan

3,2385 gold badges30 silver badges63 bronze badges

2 Comments

juan carlos peña cabrera Over a year ago

Nombre: <strong>{{ empleado?.nombre }}</strong> and how can i do this

Riza Khan Over a year ago

@juancarlospeñacabrera You can only do that if you are using Vue3. Or, turn that into a computed property and do the optional chaining in the <script> tag.

Collectives™ on Stack Overflow

Vue.js undefined error on object value when loaded and rendered

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related