How to Load data into Handsontable using Vue and Axios

Tags: #<Tag:0x00007efc86b4de10>
#1

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…

Any suggestions?

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:

37%20PM
Screen Shot 2020-09-01 at 6.11.37 PM.jpg2880×1586 394 KB

Loading Data Outside of Axios call where we uncomment lines 70-73:

50%20PM
Screen Shot 2020-09-01 at 6.11.50 PM.jpg2880×1592 387 KB

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.

Thanks

#2

Thank you for sharing details about the issue and a demo. I will check the demo and come back to you shortly.

#3

Hi @trenth12

Here’s an Axios for Vue tutorial - https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html and a code sample - https://github.com/bedakb/vue-typeahead-component/blob/master/src/components/Typeahead.vue
It uses fetch, but it should be easy to replace.

If you won’t be able to get it working please share your license ID and this forum URL to support@handsontable.com and I’ll create a sample demo for you.

#4

Hi @aleksandra_budnik

I do not believe the issue here is with the axios call itself… I have updated the original CodeSandbox example linked above to actually pull data from the following URL:

https://jsonplaceholder.typicode.com/todos/1

This URL returns the following data:

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Now taking a look at the Users.vue file. Remember you must navigate to “users” in the internal browser…

You will see on Lines 60-63 I set the hotSettings.data option to the data that we get from the axios request and I also set the colHeaders on line 56

You should then see on line 67 that I log this.hotSettings.data and the proper data is logged to the console…

Finally, see line 4 where I actually call hotSettings.data within the HTML Template… here:

{{ hotSettings.data }}

You will then see on the page that the data loads correctly. However, you should also see on the page that the same data does not load within the handsontable as I would expect it to. We do however see that the column values load properly strangely enough… However, the data values do not load. Is there a reason why the columns are loading and the data is not? See the following screenshot:

15%20PM
Screen Shot 2020-09-03 at 5.27.15 PM.jpg2880×1588 479 KB

Am I still doing something wrong here?
I am going to try this again but using Vuex with a store where I store the data and settings within my store and update the component that way (Also using an axios action to load the table on page start up).
For now is there any way you can take a look at this further? I hope my explanation was sufficient.

Here is the CodeSandbox:

Trent

#5

I have another example here where I have attempted to use Vuex…

Here I am using Vuex to actually store the handsontable data and I am using a computed property called hotSettings to actually populate the table. The data within hotSettings computed property is the store handsontable data values. I have an action defined called “getData” to retrieve data with axios and it then does a commit to set the store value for the table. You will see in the browser that the table again does not get updated but the variable within hotSettings.data is actually updated based on the getData action… Again we are seeing that the data within the handsontable is not really acting how it should I believe.

As as side note… within this sandbox if you load the page to “users” and then after that if you comment out line 55 of ‘components/Users.vue’ we actually see the data load in as it should… I believe this is because the state now is set properly and for whatever reason now the table displays properly?

Let me know if this makes sense. I would like to note that my vue expertise is limited so if I am off base with anything let me know.

Thanks

#6

Hi @trenth12

I’m back with some feedback from our Support Engineer.

I’d recommend using our method to populate data in the table e.g. updateSettings - https://codesandbox.io/s/handsontable-axios-vue-forked-lhk6f?file=/src/components/Users.vue instead of the reference.

#7