Hi, I am currently attempting to use Handsontable + Vue + Axios to be able to display data from a custom rest API.
I am running into some trouble when it comes to loading data into handsontable and keeping it reactive when using axios to retrieve the data.
Please see the following example I have created:
I should mention the template I provided uses routes and you will need to navigate to “users” within the internal browser to see the handsontable.
You will notice when navigating to “users” that the specified data does not get loaded… However, the colHeaders get loaded just fine.
Something else to point out if you uncomment lines 70-73 of Users.vue you will see that the data loads just fine… Here I am setting the hotSettings.data variable but I am doing so outside of the axios call and this works just fine… Not sure what possibly I could be doing wrong here on account that the colHeaders load just fine within the axios call but the data does not load properly…
Here are also some screenshots:
Loading Data inside Axios call we should see the array in lines 62-63 populate the table. However, the data does not get populated:
Loading Data Outside of Axios call where we uncomment lines 70-73:
You will also see another function call on line 19
// this.setData() This is another method for setting the data without using axios that also works just fine…
Not sure what I could be missing or overlooking here.