The watcher for initialFilters not working

[matthewoestreich]

• Bug Fix

The following modification will resolve issues #579 #578 #577..

There is a link to a repo which contains working code at the bottom of this comment

Findings:

In the file VgtFilterRow.vue on lines 62-72 there is an equality check that is performed before updating filters. If this equality check is removed, the columns property will respect, and react to, nested property changes that are made programmatically.

• If you comment out line 65, as well as line 67 in VgtFilterRow.vue, it fixes this issue.

• This has been tested...I forked the repo, made changes, re-bundled the code, and tested this

• I can confirm this 100% fixes this flaw/bug.

Resolution:

// VgtFilterRow.vue
...
watch: {
   columns: {
     handler(newValue, oldValue) {
       //if (!isEqual(newValue, oldValue)) {
         this.populateInitialFilters();
       //}
     },
     deep: true,
     immediate: true,
   },
 },
...

Testing:

After commenting out the two lines mentioned above:

• In /dev/App.vue from line 241 to line 258, the following change was made to test programmatically setting the filterValue..

...
setFilter() {
    this.columns[1].filterOptions.filterValue = 16;
    /*
    const column1 = JSON.parse(JSON.stringify(this.columns[0]));
    column1.filterOptions.filterValue = 'John';
    this.$set(this.columns, 0, column1);
    const column2 = JSON.parse(JSON.stringify(this.columns[1]));
    column2.filterOptions.filterValue = 20;
    this.$set(this.columns, 1, column2);
    */
    // this.$set(this.columns[1], 'filterOptions', { enabled: true, filterValue: 20 });
    // this.$set(this.columns[0], 'filterOptions', {
    //   enabled: true,
    //   placeholder: 'All',
    //   filterDropdownItems: ['Chris', 'Dan', 'Susan', 'John'],
    //   filterValue: 'John',
    // });
  },
...

Working Code

You can fork this repo if you would like to test this out...

[xaksis]

oh man! I forgot there was a watcher for columns in row header! Thank you for finding this. That line I believe was added to prevent filtervalue handler to trigger for remote tables on initial setup. Will do some testing and push out a new version soon.

Thank you @oze4 for your persistence and apologies for not recognizing this sooner.

[matthewoestreich]

No worries. This only works if you define an empty value for the initialValue while using VGT. That's how I would expect it to work since Vue is not reactive to added properties, only existing ones. Figured that was worth mentioning. AKA as expected. (That is how I was attempting to use this "in the wild"). If you want to add a filterValue to a column that initially did not contain an empty value, you have to supply a new object so Vue reacts to it. This is expected behavior. Thanks for your help!