The filter doesnt work with one input character on b-table - bootstrap-vue

Question

i have a b-table with a filter, but the filter doesn't work when i search by one character, in my case, by the ID, but, if i introduce 2 or more numbers this work.
i check the example on bootstrap-vue and this work searching by one number, but i cant find why in my code this not work as i expected.
<div id="app">
<span label-for="search">search: </span>
<input id="search" type="text" v-model="filter" placeholder="type by search">
{{ this.filter }}
<b-table
class="mt-2"
:filter="filter"
:fields="fields"
:items="items">
</b-table>
</div>
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
filter: null,
fields: [
{
key: 'isoqf_id',
label: '#'
},
{
key: 'name',
label: 'Name'
},
{
key: 'references',
label: 'references id'
}
],
items: [
{
"isoqf_id": 1,
"cerqual": {
"explanation": "Suspendisse eget ligula blandit, dignissim neque at, luctus nunc. Nulla eros odio, fringilla et diam ut, maximus euismod nibh.",
"option": "0"
},
"name": "finding #1",
"references": ["4a5f2a", "4a5f2f"],
"organization": "7b9c88ec182ca383",
"project_id": "5d84d6bc2b711a1a2eba93ea",
"id": "5d84ee422b711a1a2eba9507",
"cerqual_option": "0"
}, {
"isoqf_id": 2,
"cerqual": {
"explanation": "",
"option": "0"
},
"name": "finding #2",
"references": ["4a5f3b", "4a5f37"],
"organization": "7b9c88ec182ca383",
"project_id": "5d84d6bc2b711a1a2eba93ea",
"id": "5d850b3c2b711a1a2eba956f",
"cerqual_option": "0"
}, {
"isoqf_id": 3,
"cerqual": {
"explanation": "",
"option": "3"
},
"name": "finding #3",
"references": ["4a5f3b", "4a5f28"],
"organization": "7b9c88ec182ca383",
"project_id": "5d84d6bc2b711a1a2eba93ea",
"id": "5d8517a72b711a1a2eba9679",
"cerqual_option": "3"
}]
}
},
methods: {
}
})
}
the url for test https://codepen.io/damian-garrido/pen/aboemNG
i expect i can search by the isoqf_id field, what i'm doing wrong?

Answer 1

The default search algorithm searches ALL fields in the items table (not just visible data). It matches by looking for anything that contains the filter string. So if you type in the digit 1 it will show all records that have the character 1 in any fields.
To limit to just certain fields, set the prop filter-included-fields to an array containing the top level property names (field names) that you want to restrict the search to. If you want to limit to just isoqf_id, then set :filter-included-fields=['isoqf_id']". To limit filtering to isoqf_id and references set `:filter-included-fields=['isoqf_id', 'references']"
See https://bootstrap-vue.js.org/docs/components/table#built-in-filtering-options