如何从vuetify数据表槽中消除和理解这个错误警告？

如何解决如何从vuetify数据表槽中消除和理解这个错误警告？

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

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

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

json 以字符串形式返回 x.id 和 typeID 并使用严格比较

例如

"characters": [
{
  "id": "1","name": "Gaia","email": "[e-mail]","bio": "This really is all about me","image": "","url": "","typeId": "3","active": "1"
},{
  "id": "2","name": "Alphomega","password": "","bio": "Hub really is all about me","typeId": "4",

]

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

在我的数据表中，我列出了字符并有一个槽来显示行中的用户类型文本。因此，对于字符“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: [
      { 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 },],

解决方法

它显示此错误是因为您的 find 方法将在 x.id !== item.typeId

时为您提供 undefined

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

<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