📌 버튼 누르면 상품이 가격순으로 정렬되도록 하기
🔎 vue 는 {{데이터바인딩}}을 해 두면, 데이터가 변경 사항이 생길 시 HTML 에도 자동으로 실시간 반영되도록 한다.
즉, 데이터를 변경만 시키면 된다.
1. 정렬 버튼 만들기
<button>가격순 정렬</button>
버튼을 누르면 prodList 라는 상품데이터를 가격순으로 (낮은가격 -> 높은가격) 재정렬 시켜보자!
그러려면 일단 클릭 이벤트를 바인딩 해야 한다.
2. 클릭 이벤트 기능 부여
버튼을 클릭하면 priceSort 라는 함수가 실행되도록 하고
<button @click="priceSort">가격순 정렬</button>
mothods: {} 에 priceSort 함수를 추가하자.
methods: {
// [허위매물신고] 버튼 클릭 시 신고 수 증가
increase(i) {
// 함수 내용 입력
this.count[i]++;
},
// 가격 정렬 기능
priceSort() {
}
},
부동산 데이터를 prodList 라는 곳에 담았었다.
그러면 prodList 를 sort 하면 된다.
🔎 mothods 에서 prodList 라는 데이터에 접근하려면 this 를 쓰는 것을 잊지 말자. this 에 무엇이 있는 지 궁금하면 console.log(this) 로 찍어서 알아보는 습관을 가지자
sort()
array.sort()
오름차순으로 정렬 시켜 준다. 하지만 문자로 인식해서 가나다순으로 정렬된다고 생각하면 된다.
숫자 정렬을 하려면 다음과 같이 해야 한다.
// 오름차순 정렬 (1,2,3 ~)
array.sort(function(a,b) {
return a - b;
})
// 내림차순 정렬(3,2,1 ~)
array.sort(function(a,b) {
return b - a;
})
sort 를 활용하여 다음과 같이 작성하면 된다.
priceSort() {
this.prodList.sort(function(a,b) {
return a.price -b.price;
});
}
하지만 여기서 문제가 생긴다.
Array 데이터 원본이 변형되어버린다.
데이터 원본은 유지하면서 정렬 기능이 작동 되도록 기능 개발을 해야 한다.
📌 정렬 되돌리는 버튼 만들기
1. 되돌리기 버튼 만들기
<button @click="priceSort">가격순 정렬</button>
<button @click="sortBack">되돌리기</button>
2. methods 에 기능 추가
sortback 을 추가해준다.
methods: {
// [허위매물신고] 버튼 클릭 시 신고 수 증가
increase(i) {
// 함수 내용 입력
this.count[i]++;
},
// 가격 정렬 기능
priceSort() {
this.prodList.sort(function(a,b) {
return a.price -b.price;
});
},
// 되돌리기 버튼 클릭 시
sortBack() {
}
}
3. sortBack()에 되돌리기 기능 구현하기
사본을 만들어서 원본을 보존해야 한다.
현재 prodList 에 데이터 정보를 담고 있다.
같은 Array 를 바라보는 서로 다른 변수를 만들면 그 변수는 같은 Array 를 바라본다.
따라서 단순히
prodList_2 = prodList;
로 코드를 작성하게 되면
prodList_2 를 변경하면 prodList 도 같이 변경되게 된다.
🔎 이에 대한 자세한 내용은 referenct data type 검색해보기
array 자료를 복사하고 싶을 땐
[...array] 를 활용하면 된다.
🔎 [...array] : 점 3개 문법, spread operator 라고 한다.
[...array] : spread operator
array 복사본을 만들고 싶을 때 활용한다.
array 나 object 앞에 붙일 수 있다.
array, object의 괄호를 제거해주는 문법이다.
...[1,2,3] 이런식으로 쓰면 1,2,3 만 남는 다는 뜻이다.
1,2,3 만 남은 것에 다시 [] 를 씌우니 값이 똑같은 array 가 재탄생한다.
... 로 괄호를 벗겼다가 다시 씌운다! 라고 이해하면 된다. (일종의 편법)
더 자세히 알고 싶다면 reference data type 을 검색하면 된다.
다시 돌아와서,
되돌리기 기능을 구현하기 위해 spread operator 를 활용해보자.
데이터 보관함에 데이터 원본을 따로 저장한다.
data() {
return {
menu : ['Home', 'Shop', 'About'],
count : [], // 신고 수
isModal : false,
originProdList : [...prodList], // 부동산 데이터 원본
prodList : [...prodList], // 부동산 데이터들
prodId : 0, // 상품 id
}
}
originProdList 를 새로 생성해주었다. (원본 보관용)
이제 sortBack() 함수의 내용을 채울 수 있다.
// 되돌리기 버튼 클릭 시
sortBack() {
this.prodList = [...this.originProdList];
}
'Vue3 > 코딩애플 part1' 카테고리의 다른 글
[Vue/코딩애플/part1] 13. vue의 라이프사이클 (0) | 2024.07.30 |
---|---|
[Vue/코딩애플/part1] 11. UI 애니메이션 효과 주기 / transition (0) | 2024.07.30 |
[Vue/코딩애플/part1] 10. input (v-model), watcher (0) | 2024.07.29 |
[Vue/코딩애플/part1] 9. custom event (자식이 부모 데이터 바꿀 때) (0) | 2024.07.29 |
[Vue/코딩애플/part1] 8. props (0) | 2024.07.29 |