Question

所以我学会了VueJS 2删除了Vue2中的orderby funtionality：'（我一直在尝试在Vue2中重写我的应用程序并理解计算属性是新的方法。我有以下内容：

alphabeticalPosts: function () {
    return _.orderBy(this.posts, 'name')
},

searchedPosts: function() {
    return this.posts.filter((post) => {
        return 
            post.name.toLowerCase().includes(this.keyword.toLowerCase());
     });
},

这两者彼此分开工作。我遇到的问题是我需要在HTML上同样如此：

<li v-for="post in searchedPosts/alphabeticalPosts">{{post.name}}</a>

现在，当然，这不起作用，但它说明了我的问题。我需要同时应用于同一数据集。在Angular中我会像这样管道：

ng-repeat="post in posts | searchedPosts | alphabetizePosts"

当然，这在Vue中也不起作用。我的印象是我需要将这两个计算机属性合并为一个？我的JS缺乏，每当我尝试这个时，我的结果都很糟糕。如何使用我的计算属性？

Answer 1

computed:{
    filteredAndOrdered: function () {
        const keyword = this.keyword.toLowerCase();
        const filtered = this.posts.filter(post => post.name.toLowerCase().includes(keyword));
        return _.orderBy(filtered , 'name')
    }
}

模板

<li v-for="post in filteredAndOrdered">{{post.name}}</a>

Vue JS 2数据的多个计算属性

1 个答案: