vuetify: v-data-table key undefined sort click

Question

then using v-data-table with multiple data, in the event onclick sort have a messagge in the console "TypeError: Cannot read property 'key' of undefined", help me please

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)

You need to show your code. Try adding a fiddle or the snippet making the error. — Majed Badawi
this is my code, then 3th try sort in column cliente the error persist jsfiddle.net/angel_jadan/51ytp8uj/55/… — Angel

tao tao · Accepted Answer · 2020-06-03T23:49:16

The problem is you're having duplicate keys in your data. If you want all your table's functionality to work properly, especially sorting, you have to provide a unique key for each row.

A simple fix for your example would be:

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

In template:

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

See it working here.

While using indexes as key works, the industry standard for key-ing collections is uuid (or similar):

npm i uuid
(if using typescript) npm i @types/uuid -D
in component: import { v4 as uuid } from 'uuid'
in data: [/* your items */].map(item => ({ ...item, key: uuid() }))

Unique identifiers are a must when working with arrays in JavaScript, as the order of elements in an array is not guaranteed across implementations. And I'd add working with arrays in JavaScript is also a must, since they're faster than any alternative.

vuetify: v-data-table key undefined sort click

1 Answers