Vuesax: API call + vs-table gives error - Cannot read property 'querySelector' of null"
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.
Here's demo
https://codesandbox.io/s/5298ovjonn
jsinhSolanki
All 15 comments
It was issue of my code. Sorry.
jsinhSolanki
on 1 Apr 2019
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.....
jsinhSolanki
on 1 Apr 2019
let's review, thank you very much we can hardly fix the error
luisDanielRoviraContreras
on 1 Apr 2019
@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,
jsinhSolanki
on 1 Apr 2019
I also encountered this one using the "multiple" API
thepepperone
on 5 Apr 2019
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).
mikifus
on 5 Apr 2019
@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.
jsinhSolanki
on 5 Apr 2019
Any updates on this?
thepepperone
on 11 Apr 2019
I have the same issue...but nothing to do with the "multiple" prop.
Pedrazl
on 14 May 2019
In my case @mikifus workaround worked fine. Just place tbody between and
<template slot-scope="{ data }">
<tbody ref="tbody">
<vs-tr v-for="(tr, indextr) in data" :key="indextr" :data="tr">...
Pedrazl
on 30 May 2019
Basically, looping <vs-tr> inside <tamplate> shows console error,
muhammedsaifudeenphases
on 6 Aug 2019
Update code of VsTable plase, here my suggestion
method: changeTdsWidth() ->
if(tbody) {
let trvs = tbody.querySelector('.tr-values')
if (trvs === undefined || trvs === null ) return
let tds = trvs.querySelectorAll('.td')
let tdsx = []
tds.forEach((td, index) => {
tdsx.push({index: index, widthx: td.offsetWidth})
});
let colgrouptable = this.$refs.colgrouptable
if (colgrouptable !== undefined && colgrouptable !== null ) {
let colsTable = colgrouptable.querySelectorAll('.col')
colsTable.forEach((col, index) => {
col.setAttribute('width', tdsx[index].widthx)
});
}
}
jrgarciadev
on 10 Aug 2019
This issue is still persisting. Adding TBody inside template slot around vs-tr loop doesn't fix it for me either.
dinoluck
on 18 Oct 2019
I've just simply pasted over vuesax.common.js the if(tbody) {..} snippet from @jrgarciadev - it removed the error from the console. Hopefully, the issue is resolved soon on the author's side.
dinoluck
on 18 Oct 2019
when using "multiple" props you need to wrap <vs-tr> inside <tbody>
My console error has gone!
webclidev
on 9 Mar 2020
Related issues
sangdth
路
4Comments
grali
路
4Comments
mjmnagy
路
3Comments
webafra
路
3Comments
jupox
路
3Comments