How can I set my bootstrap-vue b-table to only show items when a filter is applied by the user (i.e., entered a value into the input)? For example, if "filteredItems" doesn't exist, then display nothing? This is primarily to prevent rendering all rows (>2k rows) and impacting performance.
Here is the link to the jsfiddle with b-table: https://jsfiddle.net/asc82spc/
const template = `...`; // JavaScript code snippet here
const toString = v => {...};
const recToString = v => {...};
const defaultSortCompare = (a, b, sortBy) => {...};
// Vue component for b-table
const bTable = {...};
new Vue({
el: '#app',
components: {bTable},
data: {...}, // Data object
methods: {...}, // Event handling methods
});#app {
padding: 20px;
height: 500px;
}
html,body { font-size: 14px;}
table[aria-busy="false"] {
opacity: 1;
}
table[aria-busy="true"] {
opacity: .5;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!-- Vue app HTML structure -->
</div>