Question

这是错误

TypeError：无法读取未定义的属性“名称”
在Object.fn [作为项]（app.js：74266）...

大家好，我正在开发Users Vue组件，最近更新为Vuetify，并且从该控制器的Laravel后端获取了用户API 。谢谢您的任何帮助或建议。

UsersController.php

public function index()
{
    //With data from ROLES table
    $users = User::with('role:role_id,name')->orderBy('id','asc')->get();
    return response()->json($users);
}

props.item.role.name正常显示，并且添加/更新功能也正常工作，除了更新用户后显示的错误

Users.vue

<template>
 <v-data-table
   :headers="headers"
   :items="myUsers"
   :search="search"
   :loading="isLoading"
   class="elevation-1"
  >
     <v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>
     <template slot="items" slot-scope="props">
        <td class="text-md-left pt-3">{{ props.item.name }}</td>
        <td class="text-md-left pt-3">{{ props.item.email }}</td>
     -----------------------------------------------------------------------
        **<td class="text-md-left pt-3">{{ props.item.role.name }}</td>**
     -----------------------------------------------------------------------
        <td class="justify-content-left layout">
          <v-btn icon @click.prevent="editUser(props.item)">
             <v-icon color="blue">edit</v-icon>
          </v-btn>
          <v-btn icon @click.prevent="deleteUser(props.item)" :disabled="props.item.name === 'admin'">
             <v-icon color="pink">delete</v-icon>
          </v-btn>
        </td>
     </template>

     <v-alert slot="no-results" :value="true" color="error" icon="warning">
        Your search for "{{ search }}" found no results.
     </v-alert>

     <template slot="no-data">
        <v-btn color="primary" href="/dashboard/users" >Reset</v-btn>
     </template>

 </v-data-table>
</template>

[已编辑] VueDevTools视图

myUsers.role.name的值在v-data-table中显示''student''字符串。 props.item.role.name实际上是错误的根源，当我省略它或将其更改为非嵌套JSON之类的props.item.role_id时不会发生。

[VueDevTools View - JSON] 1

[VueDevTools View - Error] 2

Answer 1

这说明您的:items="myUsers"中没有role.name。

因此，当您尝试执行{{ props.item.role.name }}时，会弹出错误消息。

查找myUsers，当您遇到错误时，例如VueDevTool，它将丢失role.name。

找到添加或删除该行的方法，然后数据表就可以了。

Answer 2

我终于在这里解决了我的问题。我收到错误的原因有两个。一个在后端（Laravel），一个在前端（Vue.js）。

后端

我的用户和角色具有一对多关系，因此使用此修复程序可以更新/编辑角色（仅此一项就解决了我的问题）

$user->roles()->sync(values);

前端

此外，对于小问题，由于我正在使用

，因此更新/编辑v-data-table中存在错误

Object.assign({},obj);

我发现的

仅适用于对象的浅表复制，当为对象内部的深层属性更新数据时失败。显然没有到达props.item.role.name。通过使用它，我解决了错误

JSON.parse(JSON.stringify(obj));

Vuetify v-data-table在嵌套的JSON

UsersController.php

Users.vue

[已编辑] VueDevTools视图

2 个答案: