vue.js - 验证 : v-data-table key undefined sort click

Question

然后将 v-data-table 与多个数据一起使用，如果 onclick 排序在控制台中出现消息“TypeError:无法读取未定义的属性‘key’”，请帮助我

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
• (如果使用 typescript )npm i @types/uuid -D
• 在组件中:import { v4 as uuid } from 'uuid'
• 在数据中:[/* 你的项目 */].map(item => ({ ...item, key: uuid() }))

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