Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
FabianAlbrecht opened this issue Sep 10, 2019 · 11 comments · Fixed by #4068, mariazevedo88/hash-generator-js#4 or mariazevedo88/hash-generator-js#11

Comments

@FabianAlbrecht
Copy link

commented Sep 10, 2019

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

This comment has been minimized.

Copy link

commented Sep 10, 2019

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

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

@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

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

@FabianAlbrecht there is a mistake in your template.

image

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

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

@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

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

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

@FabianAlbrecht

This comment has been minimized.

Copy link
Author

commented Sep 10, 2019

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 tmorehouse reopened this Sep 10, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

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

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

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

This comment has been minimized.

Copy link
Author

commented Sep 11, 2019

Thanks for fixing the issue. Your workaround works perfectly.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

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

tmorehouse added a commit that referenced this issue Sep 11, 2019
…vent duplicate provider calls on mount (fixes #4065) (#4068)
@tmorehouse tmorehouse changed the title Filter-object of b-table not reactive anymore b-table: `filter` as object not reactive anymore when using items provider Sep 12, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.