How to eliminate and understand this error warning from vuetify data table slot?

Question

I have a Vuetify data table populated from a json data store lke below. But i keep getting this warning:

Error in render: "TypeError: Cannot read property 'usertype' of undefined"

The display and code works as expected but I dont like the error warning and want to understand it.

The x.id and typeID are returned by json as strings and strict comparison is used

Eg

"characters": [
{
  "id": "1",
  "name": "Gaia",
  "email": "me@meemee.com",

  "bio": "This really is all about me",
  "image": "",
  "url": "",
  "typeId": "3",
  "active": "1"
},
{
  "id": "2",
  "name": "Alphomega",
  "email": "me@meemee.com",
  "password": "",
  "bio": "Hub really is all about me",
  "image": "",
  "url": "",
  "typeId": "4",
  "active": "1"
},

]

"userTypes": [
{
  "id": "3",
  "usertype": "character"
},
{
  "id": "4",
  "usertype": "author"
},
]

In my data table I list the characters and have a slot to display the usertype text in the row. So for character 'Gaia' the row would display the row id,name.email, and instead of the typeId it would display the value of the usertype - in this case "character" - from the UserType json data.

To do this is I use this template slot:

    <template v-slot:item.type="{ item }">
      <span v-if="userTypes.length">
        {{ userTypes.find(x => x.id === item.typeId).usertype }}
      </span>
    </template>

and this is the headers array

headers: [
      { text: 'ID', value: 'id' },
      { text: 'Name', value: 'name' },
      { text: 'Type', value: 'type' },
      { text: 'Email', value: 'email' },
      { text: 'Active', value: 'active' },
      { text: 'Actions', value: 'actions', sortable: false },
    ],

Maybe just some `typeId` value not found in the `userTypes` array ? Checked that out? — Michal Levý, Jan 20 '21 at 17:50
Ah now i do / see. In this case there are no empty or non existent ids/typeIds — joomkit, Jan 20 '21 at 19:16
Great. Just check again. Because if this was a syntax error or something else, error message would look completely different. This really seems as some of `typeId` values was not found (had no corresponding record in `userTypes` array) — Michal Levý, Jan 20 '21 at 19:35

score 0 · Accepted Answer · answered Jan 20 '21 at 19:13

it is showing this error because your find method will give you undefined when x.id !== item.typeId

According to MDN on Array.find about its return value: The value of the first element in the array that satisfies the provided testing function. Otherwise, undefined is returned.

<template v-slot:item.type="{ item }">
  <span v-if="userTypes.length">
    {{ userTypes.find(x => x.id === item.typeId).usertype }}
  </span>
</template>

instead do this

<template v-slot:item.type="{ item }">
  <span v-if="userTypes.findIndex(x => x.id === item.typeId) !== -1">
    {{ userTypes.find(x => x.id === item.typeId).usertype }}
  </span>
</template>

Array.find on MDN link

Thanks Richard - I was pre-filtering userTypes but it looks like the array still has missing ids and this solves it nicely. Thx for the solution and education — joomkit, Jan 21 '21 at 13:20

How to eliminate and understand this error warning from vuetify data table slot?

1 Answers1