"this" not set as underlying vm for getFilterData functions

It seems “this” from the vue instance vm is not made available to the getFilterData functions. No error is thrown because it is just filtering on “undefined”. Filtering works when directly inserting text:return el.description.includes('hello').

data: function () {
  return {
    searchStr: null,
    option: {
      getFilterData: {
        "contains": function(el) {
          console.log(this.searchStr) // undefined when called
          return el.description.includes(this.searchStr)
        }
      }
    }
  }
});

[David-Desmaisons]

Here you, here is the corrected fiddle:

https://jsfiddle.net/dede89/w1tbv83L/7/

Tweaks:

1. getFilterData and getSortData were not defined in data , so I added filterData and sortData
2. v-for="(val, key) key and val were inverted
3. To have the correct context in the getFilterData contains function, I used ES6 arrow function to capture viewModel context (you can do it by hand if you use ES5 using var ctx=this...):

getFilterData: {
    "show all": function() {
         return true;
   },
    "contains": (el) => {
         return el.description.includes(this.searchStr)
   }
 },

And it worked like a charm…

[MintyOrb]

Thank you David! I realized it was the same issue shortly after posting but wouldn’t have thought to use a method on my own. And again, thanks for producing this component- it’s very handy.