Bootstrap-vue table _showdetails closes when data is updated

Question

I have a bootstrap-vue table, which is bound to a computed property that fetches some data from my vuex store.

Each row has a show_details button, which opens a second row as per this link: https://bootstrap-vue.js.org/docs/components/table/#row-details-support

However when the data changes in my vuex store, the table re-renders and looses its state (all of the opened 'show_details' rows go back to closed).

Is there any way to update the table data in the store and the table, without loosing the table's current state?

Answer 1

Once receiving the new data from your back-end, before updating the store, you could loop through the old table items array looking for the _showDetails property, and then update the new data array setting _showDetails if the rows are the same (say by using a primary key or other unique row identifier to correlate the rows). Then update your store items array with the new data.