时间戳

首页 > 解决方案 > vuetify: v-data-table key undefined sort click

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

问题描述

然后使用具有多个数据的 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)

标签： vue.jsvuetify.js

解决方案

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

您的示例的简单修复是：

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 中使用数组也是必须的，因为它们比任何替代方法都快。

推荐阅读