[Vuejs]-Using multiple filters in v-for directive in Vue 2.0

by

4👍

Found the answer from here

Basically, we only need one computed function to return the filtered data for v-for directive, e.g.

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

If we want to add multiple, just chain all your javascript native .filter functions in that function and return the data. In my case, it would be something like this:

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 and self.selectedCategory are just data properties for this Vue instance in my example, the key takeaway is one computed function with multiple .filter() functions chaining together.

Hope that will help.

👤He Wang

Leave a comment