V-数据表键未定义的排序单击

Question

然后使用带有多个数据的v- data表，如果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"
              ... />

看到它在运行这里。

当使用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中使用数组也是必须的，因为它们比其他任何选项都快。