Hello. In my app I’m using vue.js with nuxt.js and @handsontable/vue.
After receiving data from the backend, the handsontable component does not render data attributes.
But the handsontable component displays the correct number of rows in the data array.
Here’s a code example:
Render result
Data form backend
Note: if I pass an array of data through data() function, creating it manually, the handsontable component renders everything perfectly.
Hi @a.dugaev
I assume that data might be returned in a different format than previously set in Handsontable. We also had a similar case here https://github.com/handsontable/handsontable/issues/5993
@aleksandra_budnik, please look at this code sample https://jsfiddle.net/kotomkin/5e4w7phx/1/
In this example, after 5 seconds, the data array is replaced with another array, and the new data is not displayed.
Hi @a.dugaev,
To update data, you need to use the loadData method. Changing data by reference was dropped in Handsontable v8.0.0.
Here you can find your updated demo: https://jsfiddle.net/n1Lo3q7g/
Hi, @piotr.laszczkowski . Ok, but now I have another question.
Now you can make custom components for the renders & editors. I can pass an array of data to this custom component using props. But this data array also loading by async method. How do I call a loadData method to update data in custom component?
<select-editor hot-editor> has to follow the same life-cycle as our built-in editors. In our documentation you can find a simple example, of how to create custom vue-component-based editors.
In your case - the prepare method is a key to update the options list accordingly to the currently selected cell.
