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
– ficuscr, Commented Jul 23, 2019 at 18:26
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
– ficuscr, Commented Jul 23, 2019 at 18:32

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

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.

answered Jul 24, 2019 at 9:39

Nacho Moço

4573 silver badges7 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related