programing

Vue JS 2 데이터에 대해 여러 계산된 속성

goodcopy 2022. 8. 2. 23:33
반응형

Vue JS 2 데이터에 대해 여러 계산된 속성

그래서 Vue2 :' (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가 부족해서 시도할 때마다 결과가 안 좋아요.두 가지 계산 속성을 모두 사용하려면 어떻게 해야 합니까?

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>

언급URL : https://stackoverflow.com/questions/43147819/multiple-computed-properties-on-vue-js-2-data

반응형