b-table: filter as object not reactive anymore when using items provider

[FabianAlbrecht]

Describe the bug

When you pass a filter-object to b-table the filter-function will not be triggered when the properties of the object change. (No reactivity)
This happens since version 2.0.0.

Steps to reproduce the bug

1. Open Demo-Link https://codesandbox.io/s/gallant-curie-dkrsc
2. Change Text in the Filter -> Nothing happens
3. Change the version of bootstrap-vue to 2.0.0-rc.28
4. Change Text in the Filter -> Table is correctly filtered

Expected behavior

The Table is filtered according to the entered value

Versions

Libraries:

• BootstrapVue: 2.0.0
• Bootstrap: 4.3.1
• Vue: 2.6.10

Environment:

• Device: Mac
• OS: macOS Mojave
• Browser: Chrome
• Version: 76

Demo link

https://codesandbox.io/s/gallant-curie-dkrsc

[caiquecastro]

Do you use a provider as items? Is it being called twice? I'm having the same issue. Added a test on #4067

[tmorehouse]

@caiquecastro it is possible that providers may be called twice (initially) if you don't have a field definition provided (so b-table can lookup the field names)

[tmorehouse]

@FabianAlbrecht there is a mistake in your template.

You are passing a string to the fields prop:

<template>
  <div>
    <b-form-input v-model="filterObject.filterText" />
    <b-table :items="items" fields='name' :filter="filterObject" :filter-function="filterFunction" />
  </div>
</template>

You need to pass an array of field names (or an array of fiend definition objects):

<template>
  <div>
    <b-form-input v-model="filterObject.filterText" />
    <b-table :items="items" :fields="['name']" :filter="filterObject" :filter-function="filterFunction" />
  </div>
</template>

Making the above change, all is working fine for me.

https://codesandbox.io/s/quizzical-haslett-9jfr7

[FabianAlbrecht]

@tmorehouse You are right, that i made a mistake here.
I have fixed this in my Codesandbox (https://codesandbox.io/s/gallant-curie-dkrsc). But this does not fix the problem for me.
Even in the Codesandbox you posted the filtering does not work for me.

[tmorehouse]

If I type in 1 into the filter, it shows only Item 1

[FabianAlbrecht]

Unfortunately not for me. Maybe there is a problem with the Sandbox?

When I open your sandbox (https://codesandbox.io/s/quizzical-haslett-9jfr7) it shows the following error in the console, because there is a colon missing in front of the 'fields' prop:
[Vue warn]: Invalid prop: type check failed for prop "fields". Expected Array, got String with value "['name']".

Is it possible that it is not the current version of your code?

[tmorehouse]

I might not have saved it when forking....

[tmorehouse]

When using a computed prop to return the filter object (which generates a new object whenever the criteria changes) it works...

But when passing the same object reference of which properties inside change, it doesn't appear to be detecting the change. May need to make the filter prop watcher deep to detect changes on nested properties (although it won't detect "new" properties added to the object)

[tmorehouse]

PR #4068 fixes the issue... and will be available in v2.0.1 later this week.

As a workaround, you can use a computed prop to generate the filter object (which creates a new object when the criteria changes:

<template>
  <div>
    <b-form-input v-model="filterObject.filterText" />
    <b-table
       :items="items"
       :fields="['name']"
       :filter="computedFilterObject"
       :filter-function="filterFunction"
     />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: "Item 1" }, { name: "Item 2" }],
      filterObject: { filterText: '' }
    }
  },
  computed: {
    computedFilterObject() {
      return {
        filterText: this.filterObject.filterText
      }
    }
  },
  methods: {
    filterFunction(item, filterObject) {
      console.log(new Date(), item.name, filterObject.filterText);
      return item.name.toLowerCase().includes(filterObject.filterText);
    }
  }
}
</script>

[FabianAlbrecht]

Thanks for fixing the issue. Your workaround works perfectly.

[tmorehouse]

@FabianAlbrecht the fix will be in v2.0.1, which would hopefully be released later this week.