Как использовать filterBy в Vue.js

Question

Я собираю простое приложение для сортировки книг, и у меня возникают проблемы с использованием фильтра filterBy. Фильтр отлично работает для фильтрации non-fictiongenre, но по какой-то причине он не работает для fiction. Я хочу отображать названия книг и авторов, а затем в поле ввода фильтровать список книг, отображаемых по жанру. Поэтому, если я пишу фикцию в поле ввода, она должна отображать только художественные книги. Это то, что мой взгляд выглядит следующим образом:

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

А вот мой app.js:

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, 

}); 

Answer 1

Там нет никаких проблем с установкой, filterBy Vue является работает нормально в вашем примере. Когда вы наберете fiction, он покажет все книги, потому что все они имеют в своем жанре слово fiction, что означает: fiction и non-fiction оба содержат fiction, возвращая true.

Создайте пользовательский фильтр, как это:

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

И выбор изменений от входа в ниспадающее меню:

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

Вот скрипку его реализации: https://jsfiddle.net/crabbly/br8huz7c/