Vue: filterBy with custom filters doesn't seem to work

[Axnyff]

Hi, first of all thank you for your pretty awesome library.

As described in the documentation, you are supposed to be able to use filterBy with a custom filter but it doesn't seem to work.

I just created my custom filter as a function that will call alert whenever invoked, it works fine unless I use it with filterBy in which case my filter isn't even called.

It seems to work if you declare your custom filter inside your data options but it doesn't seem like it's the expected behavior.

Vue.js version

1.0.19

Reproduction Link

https://jsfiddle.net/j3mwzf3j/3/

Steps to reproduce

use filterBy with a custom filter

What is Expected?

the filterBy filter should call myFilter if it's registered as a global filter or if it's declared in options

What is actually happening?

myFilter is never called whether it is described as a global filter or a filter in my instance.
It's called if I put it in the data object though

Thanks a lot in avance!

[crswll]

You don't want to pass a filter to filterBy, you want to pass a function to it (I know that sounds pretty weird). You'd likely want to put your filter function in your methods option instead like:

new Vue({
  "el": "#test",
  "data": {
    "items" : ["a", "b", "c", "d"],
  },
  methods: {
    myFilter: function (val) {
      return val === "a";
    }
  }
});

then

<div id="test">
  <h2>Test</h2>
  <span v-for="item in items | filterBy myFilter">
     {{item}} 
  </span>
</div>

would work as you expect it to.

[Axnyff]

I figured out that it worked with data but I didn't try with methods which seems way more logical.

The only problem I see is that the documentation might be a little unclear.

Thanks for your help

[phanan]

As @crswll said, you'll want to pass a method instead of a filters option (there's no such officially-supported option btw). This is not "weird" though, as Vue proxies the methods – i.e. methods: { myMethod() {} } will be accessible as this.myMethod() and then myMethod in templates. The same reason applies when you add myFilter into data, although obviously it's not the recommended approach.

[crswll]

Yeah, I just meant weird as in a filter is still a function. I just did a crappy job of wording it.

[shshaw]

@crswll's example should be featured in the documentation :-) Couldn't figure out where a filterBy function needed to be placed, and there's almost no information about it in the docs.