CODEWITHSUNDEEP
laravelvue.jsvuexvuetify.js
gil
gil

Reputation: 1348

Vuetify v-data-table showing error in props.item with nested JSON

Here's the error

TypeError: Cannot read property 'name' of undefined
at Object.fn [as items] (app.js:74266)...

Hi guys I'm working on a UsersVue component and recently updated to Vuetify and I'm getting the Users API from a Laravel backend from this controller. Any help or suggestions are appreciated, thanks.

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

The props.item.role.name is showing properly and the add/update functionality are also working except the errors showing after I updated a user

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>

[Edited] VueDevTools view

myUsers.role.name has value showing ''student'' string in the v-data-table. The props.item.role.name is really the source of the errors which doesn't occur when I omitted it or changed it to a non-nested JSON like props.item.role_id.

[VueDevTools View - JSON]1

[VueDevTools View - Error]2

Upvotes: 0

Views: 4684

Answers (2)

gil
gil

Reputation: 1348

I finally fixed my problem here. There are 2 reasons why I got the error. One in the backend (Laravel) and one in the Frontend (Vue.js).

Backend

My User and Role has One to many relationship so by using this fixed my update/edit of roles (this alone solved my problem)

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

Frontend

Additionally for the minor problem, the Errors exist in updating/editing the v-data-table because I'm using 

Object.assign({},obj);

which I discovered is only suited for shallow copying of objects and fail when data are updated for the deep properties inside the object. Which obviously didn't reach props.item.role.name. By using this I coped with errors

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

Upvotes: 0

Toodoo
Toodoo

Reputation: 8750

It's telling that in your :items="myUsers" there is no role.name.

So when when you try to do {{ props.item.role.name }} it's poping you an error.

Look in myUsers, when you're having the error, with VueDevTool for example, it should miss role.name.

Find a way to add it, or remove that line, and datatable will be ok.

Upvotes: 1

Related Questions