When there's data already, new added data from other component via vuex can't be displayed correctly

Tags: #<Tag:0x00007f8b265c1418>

Hey,

Whenever I add a new data from other components(like child component) via vuex, it seems like there’s a display issue on handsontable side…

issue:

  1. index 0 row copies new added data and displays it.

then it will display correct data when I add 1 more.

At first, I thought it’s a vue life cycle issue so tested with <table> tag but it seems ok.
so it seems like hottable issue…

Let me know if you wanna get a github repo.

Regards,
Chaehwa

Hi again @r.chaehwa

I’ve checked this example https://jsfiddle.net/1q395v8p/ and wanted to replicate the issue. Can you tell me how to get the same result as yours using JSFiddle?

Morning, @aleksandra_budnik

I think the issue was from the different lift cycle between vue and handsontable. I’ve changed my code so it’s alright now.

Problem was that adding a new data function in child component and in mounted() hook while I’m using ‘computed hook’ to display the data in handsontable(in parent component).

Now I get all data in ‘mounted()’ in parent component and add it to data(vue virtual DOM) and display it. In this way, there’s no more life cycle issue.

Vue inits components: child -> parent -> grand parent

It won’t be an issue if I used ‘methods’ in child component to add a new data, but when making a wrapper in vue, I have to call it in mounted() to get the wrapper component(child component) in parent component. So that was the problem.

To compare component relationship?( I mean parent and child components, I hope it’s what it’s called) I’ve made a quick test by creating vue cli project in vs code. You can test a bit there if you’re interested in.

Have a great day.

Regards,
Chaehwa

Thank you for the feedback. I’m planning to gather all ideas on how to improve the wrappers sections in our documentation. Your feedback is very valuable.

I’m glad that I can be helpful! :slight_smile:

1 Like