Vue.jsでfilterByを使用する方法

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

セットアップに問題がない、VueののfilterByはあなたの例では正常に動作しています。 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/