[ Vue.js 2 프로그래밍 ]
(http://book.naver.com/bookdb/book_detail.nhn?bid=12320270)
6. 필터
6.1 필터링된 결과
간혹 원본 데이터를 변경하거나 초기화하지 않으면서 필터링 된 배열을 표시해야할 때가 있습니다.
methods를 활용하여 이름으로 필터링 하기
6.1.1 계산된 프로퍼티(computed properties) 사용
계산된 프로퍼티로도 배열을 필터링 할 수 있습니다. 계산된 프로퍼티는 전부 자바스크립트로 구현하므로 섬세한 제어와 유연성을 확보할 수 있고 어디서든 필터링된 결과에 접근할 수 있습니다. 예를 들어 필터링된 배열의 길이를 코드 상의 어드 곳에서도 가져올 수 있습니다.
계산된 프로퍼티를 활용하여 득표수(upvotes)로 필터링 하기
v-model을 사용하여 동적으로 필터링하기
셀렉트 박스에 v-model을 사용하여 동적으로 필터링하기
6.2 결과 정렬
이따금 어떤 기준에 따라 정렬된 배열을 표시해야 할 때가 있습니다. 계산된 프로퍼티를 이용해 각 이야기의 투표 수에 따라 정렬된 배열을 표시할 수 있습니다. 배열의 정렬하기 위해 자바스크립트 내장 함수인 sort를 사용하겠습니다
Array.sort() - https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
투표 수에 따른 정렬1
배열을 upvotes에 값에 따라 정렬하긴 했지만 인기 있는 이야기가 먼저 나와야하는 데 기대했던 것과 다릅니다.
정렬된 배열의 순서를 변경하기 위해 사용한 sort 함수를 살펴 봅시다. 자바스크립트의 sort(compareFunction)에서 compareFunction이 전달되면 compareFunction의 반환 값에 따라 배열 요소가 정렬됩니다.
a와 b라는 두 요소를 비교 한다면
- compareFunction(a, b)가 0보다 작으면 a를 b보다 낮은 인덱스(앞으로)로 정렬
- compareFunction(a, b)가 0이면 a와 b의 위치를 변경하지 않음
- compareFunction(a, b)가 0보다 크면 b를 a보다 낮은 인덱스(앞으로)로 정렬
결국 오름차순에서 내림차순으로 순서를 변경하려면 반환 값에 -1을 곱하면 됩니다.
투표 수에 따른 정렬2
6.3 사용자 정의 필터
사용자 정의 필터는 html코드를 더럽히는 일 없이 사용할 수 있으며 전역의 Vue.filter()를 이용해 처리된 값을 반환하는 fliterFunction을 전달하면 됩니다.
공식 가이드의 filter 소개 - https://kr.vuejs.org/v2/guide/filters.html
사용자 정의 필터
6.4 유틸리티 라이브러리
좀 더 개선된 방법으로 데이터를 정렬/필터/색인하기 위해서는 자바스크립트 유틸리티 라이브러리를 사용하는 것을 고려해볼 필요가 있습니다.
이미 LoDash, UnderScore, Sugar등 훌륭한 라이브러리가 준비돼 있습니다.
- LoDash(https://lodash.com/)
- underScore.js(http://underscorejs.org/)
- sugar.js(https://sugarjs.com/)
lodash를 사용하여 정렬1
lodash를 사용하여 정렬2(버튼추가)
lodash를 사용하여 정렬2(셀렉트박스, 버튼추가)