b-table with spinner on filter
See original GitHub issueI feel like I’m missing something really simple here, so I apologize initially for the question.
I’ve got a very large table which I’m rendering using a b-table. I’ve been reading through the various issues around table performance and I’ve implemented pagination and a primary-key etc… but now I’d like to have a simple spinner for the filtering event (which takes 1-2 seconds).
methods: {
setFilter() {
this.loading = true
console.log('this.loading = ', this.loading)
this.filter = this.filterInput
},
clearFilter() {
this.filter = ''
this.filterInput = ''
},
onFiltered(filteredItems) {
this.totalRows = filteredItems.length
this.currentPage = 1
this.loading = false
console.log('this.loading = ', this.loading)
},
},
I’ve got a v-if’d div
that handles the spinner based on this.loading
it works just fine for the initial load and parse of the data. But for some reason it never fires here. When I click filter (or press enter on the input) setFilter
is called, but I never see the spinner, and then eventually the results are filtered. I know this is not a bug with b-table, but I’m confused as to why I see the value of this.loading
changed in the console but no evidence in the DOM rendering. I tried sprinkling this.$nextTick
around but that didn’t seem to help.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (3 by maintainers)
Try using a double
setTimeout
. http://www.hesselinkwebdesign.nl/2019/nexttick-vs-settimeout-in-vue/ (You might find better explanations on the issue/difference between the two, but this was the first link on google)Sadly can’t give you an answer for that. Usually one is enough, as was your case. But I’ve found that sometimes two is required. It might have to do with the overlays innerworkings as, it might (not sure) use nextTick/setTimeout internally which could conflict with the flow.