Question

在Vue 1.x中关注Vue filter on v-for directive的教程后，作者在一个v-for指令中使用了多个过滤器，例如

<ul v-for="post in posts | filterBy nameFilter in 'name' | filterBy catFilter in 'cat'"></ul>

据我所知official documentation，这种语法不再在Vue 2.0中使用，我试图将这行代码重写为

<ul v-for="post in nameFilter | catFilter"></ul>

我还创建了两个计算函数nameFilter和cateFilter来按名称和类别过滤帖子。我的代码无法正常工作，它只会监听第一个nameFilter过滤器，cateFilter根本没有效果。

所以我想在Vue 2.0中，是否仍然可以在v-for指令中添加多个过滤器？如果可能的话，请问您能告诉语法吗？

如果那是不可能的，那是否意味着我需要创建一个过滤函数来完成该单一函数中的所有过滤逻辑？

提前致谢。

Answer 1

从here

找到答案

基本上，我们只需要一个计算函数来返回v-for指令的过滤数据，例如

<ul v-for="post in filteredPosts"></ul>

如果我们想要添加多个，只需在该函数中链接所有javascript本机.filter函数并返回数据。就我而言，它会是这样的：

computed: {
    filteredPost: function () {
        var self = this
        return self.posts
            .filter(function (post) {
                return post.title.indexOf(self.searchQuery) !== -1;
            })
            .filter(function(post) {
                return (post.category.includes(self.selectedCategory))
            })
    }
}

在我的示例中，

self.searchQuery和self.selectedCategory只是此Vue实例的数据属性，关键点是一个计算函数，其中多个.filter()函数链接在一起。

希望这会有所帮助。

在Vue 2.0中的v-for指令中使用多个过滤器

1 个答案: