filterBy

filterBy

• Limited to: directives that expect Array values, e.g. v-for

• Arguments:

  • {String | Function} targetStringOrFunction
  • "in" (optional delimiter)
  • {String} [...searchKeys]

• Usage:

  Return a filtered version of the source Array. The first argument can either be a string or a function.

  When the first argument is a string, it will be used as the target string to search for in each element of the Array:

  <div v-for="item in items | filterBy 'hello'">

  In the above example, only items that contain the target string "hello" will be displayed.

  If the item is an object, the filter will recursively search every nested property of the object for the target string. To narrow down the search scope, additional search keys can be specified:

  <div v-for="user in users | filterBy 'Jack' in 'name'">

  In the above example, the filter will only search for "Jack" in the name field of each user object. It is a good idea to always limit the search scope for better performance.

  The examples above are using static arguments - we can, of course, use dynamic arguments as target string or search keys. Combined with v-model we can easily implement type-ahead filtering:

  <div id="filter-by-example">
    <input v-model="name">
    <ul>
      <li v-for="user in users | filterBy name in 'name'">
        {{ user.name }}
      </li>
    </ul>
  </div>

  new Vue({
    el: '#filter-by-example',
    data: {
      name: '',
      users: [
        { name: 'Bruce' },
        { name: 'Chuck' },
        { name: 'Jackie' }
      ]
    }
  })

• Additional Examples:

  Multiple search keys:

  <li v-for="user in users | filterBy searchText in 'name' 'phone'"></li>

  Multiple search keys with a dynamic Array argument:

  <!-- fields = ['fieldA', 'fieldB'] -->
  <div v-for="user in users | filterBy searchText in fields">

  Use a custom filter function:

  <div v-for="user in users | filterBy myCustomFilterFunction">