search

olifolkerd / tabulator

Interactive Tables and Data Grids for JavaScript
http://tabulator.info
MIT License
6.71k stars 818 forks source link

vue3 reactivity problem: .push() causes Tabulator data to be updated but does not update the array variable #4212

Open DavidRueter opened 1 year ago

DavidRueter commented 1 year ago

When using reactiveData=true with vue3 and composition API, given an array such as const myArray = reactive([]) calling myArray.push() causes the Tabulator to be updated as expected, but the update of myArray does NOT happen...leading to Tabulator being out of sync with the array variable.

Seems to be related to recursion and commit 3a9da434652a0a64cd4b50693bb019f75b659a6d with vue3 and composition API, as recently as tabulator 5.5.0 and vue 3.3.4

I added comments to the commit.

Sorry I do not currently have time to set up a jsfiddle.

batzkass commented 11 months ago

Hi,

I confirm this bug, that makes Tabulator + Vue unusable in all scenarios where data must be pushed/popped, and so on. Modifying a table element in place works well. It may come from the Array functions hijacks described here.

I wrote a basic jsfiddle to illustrate all that, it should be self-explanatory.

Note that the issue is common to all usages of vue (composition/options, HTML/SFC) : for the jsfiddle example I use options with HTML, but I noticed the issue with SFC and composition in my main project as well.