Vue source data does not seem to be referenced

[dave.stewart]

I’m using HOT with Vue, but it seems to behave differently in terms of data referencing than than the standard component.

In a normal HOT component, the docs state explicitly that the data is referenced, but with the Vue table, it appears to be a kind of 1-way update:

• updating the original datasource updates the table
• updating the table does not update the datasource

Here is a demo:

• https://jsfiddle.net/davestewart/btg3hen0/5/

In the Vuex tutorial, it appears that getSourceData() is used to commit a complete set of data to the store, so I presume this is the right way to record updates with Vue?

A few questions:

• is this change of behaviour documented? If not, why not?
• is using getSourceData() the right way to make 2-way updates? Again, why not documented?
• if the data is not stored by-reference, how should we handle 2-way updates? I presume, use a watch?
• if using a local datasource, not vuex, if we update that, will it affect the table?

My comment here would be that data reactivity is one of the key selling points of Vue, and it would be really useful to address right at the start of the tutorials, even before passing attributes, etc.

I’ll be back with more questions I’m sure

[dave.stewart]

Kinda weird, there seems to be a delay in updating the table when you update the source data.

In the demo above, if you type into the input, it’s only on the second keystroke that the table updates.

[dave.stewart]

So weird behaviour if I use getSourceData () to update the original data:

• Handson Vue Table - JSFiddle - Code Playground

The function does get the full data, but:

• re-setting the original data from the callback only appears to show some of it (see how table[2][1] is null)
• when typing, the typed-in row will only update when the NEXT row gets data (try setting the cols to 3, then when one row is filling up it doesn’t update until you type in the next row)

This is fairly disheartening.

My next challenge was going to be to sanitise and submit the data, which may have involved updating the table again… which I’m not sure will work now because of this weird delay.

Can someone advise?

Thanks.

[aleksandra_budnik]

Hey Dave,

I see that you have some new discoveries in Handsontable

I can see what you mean, A3 works well but B3 is not… that’s weird. I’ll check it out.

[dave.stewart]

@aleksandra_budnik

I see that you have some new discoveries in Handsontable

Yeah - I’m dedicated alright!

I think this issue is probably related:

Adding rows does not update vue instance data correctly

[aleksandra_budnik]

I’ve asked our CTO who started the update here https://github.com/handsontable/vue-handsontable-official/issues/111 to leave a comment.

[wojciech.czerniak]

Hi Dave,

I agree about Vue. But the default reactivity in Vue is done one way. Two way is done by v-model which is a sugar syntax to simplify work with inputs. Handsonstable might be too complicated component for this.

@dave.stewart

is this change of behaviour documented? If not, why not?

It’s not a change in behavior. Data object reference is mentioned in the docs more as a “warning” or to make you aware of the reference. Handsontable stores a lot of meta data next to data and we can’t update them if don’t use our API to make changes.

@dave.stewart

is using getSourceData() the right way to make 2-way updates? Again, why not documented?

You mentioned it’s from our documentation example. I guess we can do it better. Currently we have an issue for further improvements here: Few more examples for Vue documentation · Issue #7534 · handsontable/handsontable · GitHub and if you’re missing something that’s a very valuable input.

@dave.stewart

if the data is not stored by-reference, how should we handle 2-way updates? I presume, use a watch?

Use callbacks: Events and hooks - JavaScript Data Grid | Handsontable just like you would use @events in any other component.

@dave.stewart

if using a local datasource, not vuex, if we update that, will it affect the table?

Yes. If you call render() afterwards or have observeChanges plugin active (not recommended and will be deprecated soon). Otherwise the data will update in next render cycle which you’ve observed in your second comment:

@dave.stewart

there seems to be a delay in updating the table when you update the source data

That’s why we have an API so you don’t have to worry about render and/or meta data updates.

[dave.stewart]

Hey, thanks for all the info.

I’m going to concentrate on a couple of other bits of the time being, but I will come back to this in a few days or possibly weeks when we look to polish things again

[dave.stewart]

Getting to know HOT better it seems that the goal of updating the original Vue data is perhaps not the best aim.

There seems to be too much going on for it to get reliable results, so perhaps you are right when you say:

Two way is done by v-model which is a sugar syntax to simplify work with inputs. Handsonstable might be too complicated component for this.

Though v-model is not used in props per-se, the lifecycle issue between the two frameworks seems to be problematic.

For the time being, I’m going to put data in to the table and just work with it there.

When the user is finished, we can just save and move on.