Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

b-table: Filter Debounce does not work with computed properties or data attributes in the custom filter function

See original GitHub issue

Describe the bug

filter-debounce no longer works if the custom filter-function attempts to access a data or computed property.

Steps to reproduce the bug

This fiddle will illustrate the issue: https://jsfiddle.net/0jd54wpn/1/

Notice you can try it by accessing the computed property, the data property, or both. Just comment out and see the results. Comment both if statements in filterFunction to see debounce working as expected.

Expected behavior

I expect the debouncer to work no matter what you need or try to access from within the custom filter function.

Versions

Libraries:

BootstrapVue: 2.0.2
Bootstrap: 4.3.1
Vue: 2.6.10

Environment:

Device: Windows
OS: 10 Pro
Browser: Chrome
Version: 77.0.3865.90

Demo link

JSFiddle

Additional context

Issue Analytics

State:
Created 4 years ago
Comments:27 (15 by maintainers)

Top GitHub Comments

2reactions

tmorehousecommented, Nov 13, 2019

BootstrapVue v2.1.0 has been released, which has added debouncing support to b-form-input (use this instead of the filter-debounce feature of <b-table>)

2reactions

tmorehousecommented, Oct 16, 2019

@WillGoldstein Bootstrap v2.0.4 has been released with further performance improvements for b-table/b-table-lite

Top Results From Across the Web

[Solved]-How to use computed function to filter?-Vue.js

A Vue.js filter is essentially a function that takes a value, processes it, and then returns the processed value. Here is an example...

Common Vue Problems — Debouncing Computed Properties ...

We have the filtered method that filters our code in 2 ways. this.checkedRegions has the checked values, so we can use filter with...

VueJS computed filter function not working - Stack Overflow

This is how you should implement the search filter: ... toUpperCase(); return filter ? this.data.filter(item => { return item.title.

Table | Components - BootstrapVue

For displaying tabular data. supports pagination, filtering, sorting, custom ... properties (make sure your field keys do not conflict with these names): ...

Migrating from Vue 1.x - w3resource

If you are not currently following best practices, Vue 2.0 will try harder ... To find examples of the debounce attribute, run the...