title: How to use filterBy in Vue.js
body: <p>I am putting together a simple book sorter app and I am having some trouble using the <code>filterBy</code> filter. The filter works fine for filtering the <code>non-fiction</code> <code>genre</code> but for some reason it does not work for <code>fiction</code>. 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: </p>
  
  <pre><code>       &lt;div id="app"&gt;
              &lt;h1&gt;{{title}}&lt;/h1&gt;
                &lt;div id="input"&gt;
                 &lt;input type="text" v-model="genre" placeholder="Search fiction/non-fiction"&gt;
              &lt;/div&gt;
               &lt;div id="display-books" v-for=" book in books | filterBy genre in 'genre' "&gt;
                 &lt;span&gt;Title: {{book.title}}&lt;/span&gt;
                 &lt;span&gt;Author: {{book.author}}&lt;/span&gt;      
          &lt;/div&gt;  
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is my <code>app.js</code>:</p>
  
  <pre><code>var appData = { 
    title: 'Book Sorter',
    filters: 'Search filter',
    filtertext: '* only show title if book is available',
    genre: '',
    books:
      [
        {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,
  
  });
  </code></pre>