Data table - Unwanted checkbox state persistence

[Adam]

Hi
I have a table that displays community member information, and whether they are set active or not.
Employees can use the checkbox to determine the users active state manually.

I have sorted the community member collection to sort by active state, with the inactive members at the top of the list. Once an employee changes a community member’s active state, the collection refreshes, and the previously edited community member moves accordingly.

The problem:
Even though the previously edited community member moves to its new place in the table (as expected), the state that the employee selects persists in the same spot he clicked, even though there is now a new community member row in that spot. I checked the backend, and the active state does not match the frontend value of the aforementioned row.

In other words, the backend is updated correctly, and the collection is being refreshed correctly, but it seems the frontend is persisting incorrectly with the previously selected checkbox state, and applying that to the new row that now occupies that space.

Heres a video example

Thanks in advance!

[Broberto]

Are you binding the boolean (checkbox) from the backend, to the init state of the checkbox?

[Adam]

@Broberto yes

[aurelie]

Hi Adam,
this is due to the fact that the component are reused.
To be sure that Vue (the JS framework we use) understand that your element is different, you must add a key on it.
Adding a key is mandatory only in your case, when order/filter is dynamic.

You can go to the Settings tabs, and add a key attribute. Bind the value to something unique for each row (usually an id). It should fix your problem

We already have this on our radar, so we hope to gave you a more guided solution soon for this usecase :).

[Adam]

Perfect @aurelie!
That fixed it. Thank you!