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.
Source:stackexchange.com