When two or more detail rows are open, errors occur by sorting table headers or clicking pagination buttons

[sanderheilbron]

Since Buefy version 0.6.1 issue #246 is back again.

Buefy version: 0.6.1
Vuejs version: 2.5.5
OS/Browser: MacOS 10.13.1 / Chrome 62

Although a detail-key is available, the following errors show up when opening the first detail row and sorting a column:

• [Vue warn]: It seems there are duplicate keys that is causing an update error. Make sure each v-for item has a unique key.
• [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'key' of undefined"
• TypeError: Cannot read property 'key' of undefined

A second issue that occurs is that rows disappear after sorting columns.

[rafaberaldo]

@wanxe can you take a look?

[wanxe]

Of course @rafaelpimpa I think is fixed on #426

[m0dh4x]

Hello in my mind is not the correct solution to remove the :key from detail row.

Possible solution is to add a pre or postfix to the keys. Here is the closed Vue issue #7323 with the same explained problem.

Best regards Florian

[wanxe]

Yes is a possible solution. Let me test it. Thanks sow much @fdrews :)

[m0dh4x]

You`re welcome and thank you for your great work.

If you test it, you will get another errors for duplicate keys in the docs components.

[m0dh4x]

Hello @wanxe i have detected the other duplicate key errors. The ApiView in docs/components have also a duplicate key. The duplicate key is responsible for all docs errors where the apiview have a title attribute in seperates components api folder. It is necessary to open a new issue?

Regards flo

[wanxe]

Can you provide any link? I think is the new Vue version. Is more sensible with the component :keys.
But you can do a PR if you feel confident 😄

[m0dh4x]

If I understand correctly, there was no error message in an earlier version (< 2.5.10). But the error already existed. :D

[wanxe]

@fdrews I tested some components and didn't saw any warning about that. Anyway I added again the :key prop of the detailed row with an prefix and works fine.
Now need wait to the owners to merge my changes or not. Meanwhile, can you provide the exact links/components that fails?

Or better, clone the dev repo and run npm run dev, navigate to the component and tell me. I would be very grateful, since I can't reproduce the errors.

[m0dh4x]

hey @wanxe i try my best to explain where you can find the other warnings.

The warning is thrown by /docs/components/ApiView.vue.

So if you would reproduce the warnings you have to start the dev environment, browse on the site to documentation and navigate to ui components an select for example "Table".

So you will get this warnings:
[Vue warn]: Duplicate keys detected: 'Table'. This may cause an update error.
[Vue warn]: Duplicate keys detected: 'Column'. This may cause an update error.

PS: Next time i will do a PR 😉

[wanxe]

I don't know man, but don't see any warning 😿