vuetify: v-data-table key undefined sort click

Question

然后使用带有多个数据的 v-data-table，如果 onclick 排序在控制台中有一条消息“TypeError: Cannot read property 'key' of undefined”，请帮助我

vue_2.6.11.min.js:6 TypeError: Cannot read property 'key' of undefined
    at ir (vue_2.6.11.min.js:6)
    at vue_2.6.11.min.js:6
    at x (vue_2.6.11.min.js:6)
    at vue_2.6.11.min.js:6
    at x (vue_2.6.11.min.js:6)
    at vue_2.6.11.min.js:6
    at x (vue_2.6.11.min.js:6)
    at vue_2.6.11.min.js:6
    at x (vue_2.6.11.min.js:6)
    at a.__patch__ (vue_2.6.11.min.js:6)

Answer 1

问题是您的数据中有重复的键。如果您希望表格的所有功能（尤其是排序）正常工作，您必须为每一行提供一个唯一键。

您的示例的简单解决方法是：

data: () => ({
  // assign a unique `key` to each element
  table_body: [/* your data here */].map((item, key) => ({...item, key}))
})

在模板中：

<v-data-table ref="tablaReporteGenerico"
              item-key="key"
              ... />

看到它在工作here。

---

虽然将indexes 用作key 有效，但键入集合的行业标准是uuid（或类似）：

• npm i uuid
• （如果使用打字稿）npm i @types/uuid -D
• 在组件中：import { v4 as uuid } from 'uuid'
• 在数据中：[/* your items */].map(item => ({ ...item, key: uuid() }))

在 JavaScript 中处理数组时，唯一标识符是必须的，因为数组中元素的顺序在不同的实现中是无法保证的。我还要补充一点，在 JavaScript 中使用数组也是必须的，因为它们比任何替代方法都快。