반응형
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
반응형
'programing' 카테고리의 다른 글
어떻게 만들 수 있는 부트 스트랩 vue에 단추 마이너스와 플러스? (0) | 2022.08.02 |
---|---|
필요한 규칙을 포함한 Vue.js Vuetify v-file-input에 파일이 선택되기도 전에 필요한 오류가 표시됨 (0) | 2022.08.02 |
Vuex - 저장 상태 개체가 알 수 없는 유형입니다. (0) | 2022.08.02 |
IIS에서 vuejs 파일을 실행하는 방법 (0) | 2022.08.02 |
개발 중에 VUE-CLI에서 콘솔 로그 사용 방법 (0) | 2022.08.02 |