search

lusaxweb / vuesax

New Framework Components for Vue.js 2
https://lusaxweb.github.io/vuesax/
MIT License
5.64k stars 741 forks source link

API call + vs-table gives error - Cannot read property 'querySelector' of null" #526

Open jsinhSolanki opened 5 years ago

jsinhSolanki commented 5 years ago

Hi, I am using vs-table to show my user's data. If I use normal array as you used in demos. Table component works fine. But when I use axios to fetch data from REST API. I get console error.

asdasdasd

Here's demo https://codesandbox.io/s/5298ovjonn

jsinhSolanki commented 5 years ago

It was issue of my code. Sorry.

jsinhSolanki commented 5 years ago

Data is extracted from API call now. But this error is still as it is.

After some debugging I found out that it is due to single selected feature. If I rempve multiple and v-model='selected' from below line:

<vs-table multiple v-model="selected" pagination max-items="5" search :data="users">

Error goes away. https://codesandbox.io/s/5298ovjonn You can test in above given link.

Waiting for response.....

luisDanielRoviraContreras commented 5 years ago

let's review, thank you very much we can hardly fix the error

jsinhSolanki commented 5 years ago

@luisDanielRoviraContreras Can you please at least explain what causing this. I would like to fix and make PR. I will solve this as soon as possible,

thepepperone commented 5 years ago

I also encountered this one using the "multiple" API

mikifus commented 5 years ago

This bug it's been annoying me for some time. The root cause is in the changeTdsWidth function in vsTable. It looks for a tbody object that is never there: https://github.com/lusaxweb/vuesax/blob/062880bfb10e547f81354f23c4bf4f8b1dd6f1f2/src/components/vsTable/vsTable.vue#L362

You can see here how it was commented: https://github.com/lusaxweb/vuesax/blob/062880bfb10e547f81354f23c4bf4f8b1dd6f1f2/src/components/vsTable/vsTable.vue#L87

My workaround has been to do a wrapper component that adds the tbody around the main slot. You could also add the tbody as wrapper inside the template element (based on the example in the documentation).

jsinhSolanki commented 5 years ago

@mikifus Great. You found it. I will try fixing. If I will get succeed. I will make PR. BTW thanks man. If anyone can solve please make PR. Im on holidays for some time.

thepepperone commented 5 years ago

Any updates on this?

Pedrazl commented 5 years ago

I have the same issue...but nothing to do with the "multiple" prop.

Pedrazl commented 5 years ago

In my case @mikifus workaround worked fine. Just place tbody between