Error in render: “TypeError: Cannot read property 'name' of undefined” [Vue warn]

Question

I got the following error:

TypeError: Cannot read property 'name' of undefined

Vue file:

<tr v-for="user in fields.data" :key="user.id">
    <td>{{ user.id }}</td>
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.password }}</td>
    <td>
        <a href="#" data-toggle="modal" data-target="#modal" @click="edit(user.id)">
            <span class="btn btn-primary">
                <i class="mdi mdi-edit"></i>
            </span>
        </a>
    </td>
</tr>

Script:

edit(id) {
    this.users = this.fields[id];
    console.log(this.users);
},

Possible duplicate of Angular2: Cannot read property 'name' of undefined — ficuscr
No? That doesn't help at all or offer any insight into your issue? Error is pretty darn explicit. Asked yourself why no warning on user.id? — ficuscr

Nacho Moço Nacho Moço · Accepted Answer · 2019-07-24T09:39:30

This error usually occurs when you try to access a property of an object that does not yet exist (usually because it is created async, with an API request for example). If this is your case, simply tell the template to wait for the object to exist with an v-if.

<template v-if="fields && fields.data">
  <tr v-for="user in fields.data" :key="user.id">
    <td>{{ user.id }}</td>
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.password }}</td>
    <td>
      <a href="#" data-toggle="modal" data-target="#modal" @click="edit(user.id)">
            <span class="btn btn-primary">
                <i class="mdi mdi-edit"></i>
            </span>
      </a>
    </td>
  </tr>
</template>

Remember that you cannot set the v-if on the same tag as the v-for.

Error in render: “TypeError: Cannot read property 'name' of undefined” [Vue warn]

1 Answers