如何在Vue.js中使用filterBy

我正在制作一个简单的书籍分类器应用程序，我在使用filterBy过滤器时遇到了一些麻烦。该筛选器适用于筛选non-fictiongenre，但由于某些原因，它不适用于fiction。我想显示书名和作者，然后在输入字段中，筛选按流派显示的书籍列表。所以如果我在输入字段中写小说，它应该只显示小说书籍。这就是我的看法是这样的：如何在Vue.js中使用filterBy

 <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, 

});

来源

2016-05-28 Mahmud Adam

没有您的设置没有问题，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/

来源

2016-05-28 16:47:04 crabbly

我需要使用一个完全匹配过滤器呢？确切地说， –

。您可以为此创建一个自定义过滤器。但是，为了显示这样的列表，您可能需要将输入内容更改为下拉列表。这样，它只会在用户选择所需的流派时触发事件。 – crabbly

我加了一个小提琴作为例子。一探究竟。 – crabbly

如何在Vue.js中使用filterBy

回答

相关问题