渲染错误：“TypeError：无法读取未定义的属性‘名称’”[Vue 警告]答案

【问题标题】：Error in render: "TypeError: Cannot read property 'name' of undefined" [Vue warn]渲染错误：“TypeError：无法读取未定义的属性‘名称’”[Vue 警告]
【发布时间】：2019-12-01 20:13:44
【问题描述】：

我收到以下错误：

TypeError: 无法读取未定义的属性“名称”

Vue 文件：

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

脚本：

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

【问题讨论】：

你在fields.data有什么？
没什么，抱歉，我不小心添加了。
Angular2: Cannot read property 'name' of undefined的可能重复
对不起，不一样
没有？这根本没有帮助或对您的问题提供任何见解？错误非常明显。问自己为什么user.id 上没有警告？

标签： javascript vue.js

【解决方案1】：

当您尝试访问尚不存在的对象的属性时，通常会发生此错误（通常是因为它是异步创建的，例如使用 API 请求）。如果这是你的情况，只需告诉模板等待对象存在一个 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>

请记住，您不能将 v-if 设置在与 v-for 相同的标签上。

【讨论】：