Cannot read property 'name' of undefined" when it is defined in the data?

Question

This is the data I see when I do this {{user}}

{ 
   "id":2,
   "name":"Instructor",
   "email":"instructor@gmail.com",
   "email_verified_at":null,
   "created_at":"2019-12-19 10:41:41",
   "updated_at":"2019-12-19 10:41:41",
   "uuid":"6f134dd0-227e-11ea-9d72-035d1b7f6efd",
   "last_name":"Prueba",
   "identification":"",
   "phone":"",
   "address":"",
   "user_type_id":2,
   "ranking":5,
   "user_type":{ 
      "id":2,
      "name":"Instructor"
   }
}

This is the part of the code where the error is occurring

<div class="resume">
    <h3>{{ user.name }}</h3>
        <star-rating v-model="user.ranking" :read-only="true" :star-size="15"
            :show-rating="false"></star-rating>
    <h4>{{ user.user_type.name }}</h4>
</div>

These are the errors

Error in render: "TypeError: Cannot read property 'name' of undefined"

TypeError: Cannot read property 'name' of undefined

The error is on this line

{{ user.user_type.name }}

This is the mounted and data for the vue file

data() {
    return {
        user: [],
    }
},
mounted() {
    if (this.$page.user) {
        this.user = this.$page.user;
    }
}

This is how the data is sent from the controller

if (Auth::user()->hasRole(2)) {
$user = Auth::user()->load('userType');
$courses = Course::all();
$locations = Location::all();
$notification = Notification::where('instructor_id', Auth::user()->id)
    ->with('student', 'instructor', 'location', 'course')->get();
if (Auth::user()->rankings()->count() > 0) {
    $user->ranking = Auth::user()->rankings()->avg('ranking');
} else {
    $user->ranking = 5;
}

return Inertia::render('users/show')
    ->with([
        'user' => $user,
        'courses' => $courses,
        'locations' => $locations,
        'notification' => $notification
    ]);
}

Why is this error happening? The info is clearly there why does it say it's undefined?

Could you also show how that object is loaded into the component. And you are sure it's not user.name that's throwing the error? — T. Short
@T.Short I know it's not the other line because the error message shows the line I said above only, and I'm not sure what you mean by the object loaded, you mean like in the data? — Nancy
Could you share the code for the entire file where you have the Vue component — T. Short
Try to set user: null in your data and add <div class="resume" v-if="user">. Does it solve your issue? — Fab

Fab Fab · Accepted Answer · 2020-01-02T16:22:12

Probably you load your data in asynchronous way, so when the template is mounted the user object is not available yet.

To prevent this just set user: null in your data, and then in your template:

<div class="resume" v-if="user">

Cannot read property 'name' of undefined" when it is defined in the data?

1 Answers