vue.jsvue-componentvue-filter

Cannot access "this" in Vue compnent filter

The filter is defined in the component options like this:

Vue.extend({
  ...
  props: ['filterFn', ......],

  filters: {
    myFilter(value){
      return this.filterFn ? this.filterFn(value) : value;
    }
  },

  ...
});

And it uses a function that is passed as a property to the component.

But it doesn't work.

It tells me that it Cannot read property filterFn of undefined...

Solution

  • Filters are not bound to the component instance. Use a method instead.

    https://forum.vuejs.org/t/why-does-this-inside-a-filter-function-is-undefined/18321 https://github.com/vuejs/vue/issues/5998