Mahmud Adam Mahmud Adam - 6 months ago 204
Javascript Question

How to use filterBy in Vue.js

I am putting together a simple book sorter app and I am having some trouble using the

filter. The filter works fine for filtering the
but for some reason it does not work for
. I want to display the book titles and authors, and then in the input field, filter through the list of books being displayed by genre. So if I write fiction in the input field, it should only display the fiction books. This is what my view looks like:

<div id="app">
<div id="input">
<input type="text" v-model="genre" placeholder="Search fiction/non-fiction">
<div id="display-books" v-for=" book in books | filterBy genre in 'genre' ">
<span>Title: {{book.title}}</span>
<span>Author: {{}}</span>

And here is my

var appData = {
title: 'Book Sorter',
filters: 'Search filter',
filtertext: '* only show title if book is available',
genre: '',
{genre: "fiction", title: "The Hobbit", author: "J.R.R Tolkien", available: false},
{genre: "non-fiction", title: "Homage to Catalonia", author: "George Orwell", available: true},
{genre: "non-fiction", title: "The Tipping Point", author: "Malcolm Gladwell", available: false},
{genre: "fiction", title: "Lord of the Flies", author: "William Golding", available: true},
{genre: "fiction", title: "The Call of the Wild", author: "Jack London", available: true}

new Vue({
el: "#app",
data: appData,



There is no problem with your setup, Vue's filterBy is working fine in your example. When you type fiction, it will show all Books because they all have the word fiction in the genre, meaning that: ficiton and non-fiction both contains fiction, returning true.

Create a custom filter like this:

Vue.filter('match', function (value, input) {
  return input ? value.filter(function(item) {
     return item.genre === input ? value : null;
  }) : value;

And change selection from an input to dropdown:

<select v-model="genre">
    <option value="" selected>Select Genre</option> 
    <option value="fiction">Fiction</option>
    <option value="non-fiction">Non-Fiction</option>

Here is a fiddle implementing it: