search

antoniandre / splitpanes

A Vue 3 (and 2) reliable, simple and touch-ready panes splitter / resizer.
https://antoniandre.github.io/splitpanes
MIT License
1.91k stars 171 forks source link

Nested planes with watch-slots cause browser to hang #51

Closed badders closed 5 years ago

badders commented 5 years ago

I have set of nested splitpanes that contain dynamic ui elements:

(ill refer to this as outer) Columns is a 2d array of components, which Im using the correct vue reactivity bindings to update as i can confirm by doing the same for loop outside of splitpanes just showing names in a table and it works fine. To get the grid to update correctly when adding a component to the nested array, i need to put watch-slots on the outer splitpanes, and this then works fine. However if i want to change a component on the inner array, i also have to put watch-slots on the inner splitpanes (or wait until a new row is added to force the rerender). When i do this it locks the browser up very quickly, presumably as its doing a deep watch. I can get the behaviour i want by binding the :key of the inner split panes to the uuid of the last component in the array, however this causes the entire column of elements to be regenerated, not just the additional one. Is there a way to do a shallow watch, or just force a render on the splitpanes element i know needs updating directly?
antoniandre commented 5 years ago

Hi @badders, I understand this issue is related to the known reactivity issue #47, which should now be fixed in the new Version 2 (refer to #60, thanks to @jonathan-roy). Please give it a try and let me know if it fixes this issue.

antoniandre commented 5 years ago

Closed for inactivity, please reopen if not solved.