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

Answer 1

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.