Hot-column not render data

Tags: #<Tag:0x00007f3443b3afc8>

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
2021-05-31_13-44-01

Data form backend

Note: if I pass an array of data through data() function, creating it manually, the handsontable component renders everything perfectly.

2021-05-31_13-48-44
2021-05-31_13-48-50

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?
2021-06-01_18-06-10

<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.