如何从 vuetify data table 插槽中消除和理解此错误警告？

Question

我有一个 Vuetify 数据 table 从下面的 json 数据存储中填充。但我不断收到此警告：

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

显示和代码按预期工作，但我不喜欢错误警告并想了解它。

x.id 和 typeID 由 json 作为字符串返回并使用严格比较

例如

"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"
},
]

在我的数据 table 中，我列出了字符，并有一个槽来显示行中的用户类型文本。因此，对于字符 'Gaia'，该行将显示行 ID name.email，而不是 typeId，它将显示用户类型的值 - 在本例中为“字符” - 来自 UserType json数据。

为此，我使用了这个模板插槽：

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

这是 headers 数组

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 },
    ],

Answer 1

它显示此错误是因为当 x.id !== item.typeId

时，您的 find 方法会给您 undefined

根据 MDN 在 Array.find 上关于它的 return 值：满足提供的测试函数的数组中第一个元素的值。否则，undefined 是 returned.

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

改为这样做

<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 在 MDN link

如何从 vuetify data table 插槽中消除和理解此错误警告？

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

vue.js

vuetify.js

v-data-table