[Bug Report][3.1.6] v-data-table does not reflects items values changes

[de-soul]

Environment

Vuetify Version: 3.1.6 Vue Version: 3.2.47 Browsers: Firefox 110.0 OS: Windows 10

Steps to reproduce

1. Create v-data-table that using computed items based on store (pinia) getter Items object example:

   [ { "id": 87, "name": "Test 1", "createdAt": "2023-02-28T14:44:54.117Z", "updatedAt": "2023-02-28T17:16:04.166Z" }, { "id": 88, "name": "Test 2", "createdAt": "2023-02-28T14:44:56.983Z", "updatedAt": "2023-02-28T17:16:07.816Z" }, { "id": 89, "name": "Test 3", "createdAt": "2023-02-28T14:44:59.816Z", "updatedAt": "2023-02-28T17:16:20.424Z" } ] 

2. Change item object property value in pinia. For example change name value in { "id": 87, "name": "Test 1", "createdAt": "2023-02-28T14:44:54.117Z", "updatedAt": "2023-02-28T17:16:04.166Z" } from "Test 1" to "Test 123"
3. Print computed items element on the template for controlling object changes. (In my project, i change name value in Strapi backend and refetch all data by another query, so in new data response i'll get not only "name" value changed. I'll get also updateAt new value, produced by Strapi engine). So, after changing in pinia store all data by new data, i see changes in my component template (Just by: {{ items }} in template). But v-data-table do not show value changes from items. v-data-table still show only old data. As fix you can click on some sorting icon in the top of v-data-table. After v-data-table sorts data - showing values will be correct

Expected Behavior

Expected force recreation of v-data-table on items values changed

Actual Behavior

v-data-table showing correct items values only after sorting button pressed

Reproduction Link

https://github.com/de-soul/nuxt3-strapi-starter

Other comments

You can get my tomorrow commit in attached github repository. Problem affects two files: https://github.com/de-soul/nuxt3-strapi-starter/blob/master/frontend/components/crud/Datatable.vue and https://github.com/de-soul/nuxt3-strapi-starter/blob/master/frontend/stores/sqlmanager.js . The first file is template where v-data-table and computed items object are defined. Second one file is the store file, contained items data

[de-soul]

In additional, i see that this problem can be resolved, if changed properties values from new items object with that set in item-value property of v-data-table. For example, if my items is [{id: 1, name: "Test 1", someName: "Test 1"},{id: 2, name: "Test 2", someName: "Test 2"}] and v-data-table property item-value="someName", then v-data-table will not reflects on items change if changed property name is id or someName. Only change value of name item property in new items list will affects on v-data-table showing values.

[de-soul]

As temporary bug fix, problem can be solved by forced recreation of v-data-table component

Solution

1. Define ref: const bugFixKey=ref(1);
2. Add bugFixKey ref as key property of v-data-table:

   <v-data-table
     :key="`datatable-${bugFixKey}`"
     v-model="selectedRows"
     :items="items"
     :headers="headers"
     :search="search"
     show-select
   >

3. On items change forcing recreate key of v-data-table object by changing its value: bugFixKey = bugFixKey + 1

[KaelWD]

Please create a minimal reproduction for this issue, preferably using https://play.vuetifyjs.com/. I'm not going to debug your entire project for you.

[de-soul]

Please create a minimal reproduction for this issue, preferably using https://play.vuetifyjs.com/. I'm not going to debug your entire project for you.

I created project on vuetify play here but problem not occurs... Possible the problem exist on my origins project is because i used pinia there and composables as storage at vuetify play (because i cant init pinia there).

[KaelWD]

Sounds like you have a reactivity problem then, not related to vuetify.,

[LeandroQU]

Hello, is the problem solved? When deleting a record and reloading the items, the record is still visible, the table is not refreshed