Vue JS 2 multiple computational data properties
So, I found out that VueJS 2 removed the orderby funtionality function in Vue2: '(I was trying to rewrite my app in Vue2 and figure out that computed properties is a new way. I have this:
alphabeticalPosts: function () {
return _.orderBy(this.posts, 'name')
},
searchedPosts: function() {
return this.posts.filter((post) => {
return
post.name.toLowerCase().includes(this.keyword.toLowerCase());
});
},
They both work separately from each other. The problem I am facing is that I need both in HTML like this:
<li v-for="post in searchedPosts/alphabeticalPosts">{{post.name}}</a>
Now of course this doesn't work, but it illustrates my problem. I need both to apply to the same dataset. In Angular, I would just run it like this:
ng-repeat="post in posts | searchedPosts | alphabetizePosts"
Of course, this also doesn't work in Vue. It seems to me that I need to combine these two computer properties into one? My JS is missing and every time I try to do it I get bad results. How can I use both of my computed properties?
+3
source to share
1 answer
computed:{
filteredAndOrdered: function () {
const keyword = this.keyword.toLowerCase();
const filtered = this.posts.filter(post => post.name.toLowerCase().includes(keyword));
return _.orderBy(filtered , 'name')
}
}
Template
<li v-for="post in filteredAndOrdered">{{post.name}}</a>
+2
source to share