-1

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

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

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

1 回答 1

0

它显示了这个错误，因为你的 find 方法会给你 undefined whenx.id !== item.typeId

根据 MDN on Array.find关于它的返回值：数组中满足提供的测试功能的第一个元素的值。否则，返回未定义。

<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链接上

于 2021-01-20T19:13:53.723 回答