[Vue.js] 데이터 원본 보존의 필요성 이해하기 및 상품 정렬 기능 만들기

💡 실습 포인트!

• 오늘은 각종 정렬 기능 버튼과 필터 기능 버튼, 원래대로 버튼을 만들어보았다.
• 해당 기능들은 이전에 React 실습을 할 때 한번씩 구현했던 부분이기도 하고 이제는 쉬워서 별도로 설명을 붙이지는 않았다.
  (혹시나 해당 기능의 내용에 대해 자세히 보기를 원하시는 분은 여기를 클릭!)

---

💜 "가나다순정렬" 버튼 및 기능 만들기

🤍 코드 작성하기

<button class="btn" @click="titleSort()">가나다순정렬</button>

 

titleSort(){
    this.rooms = [...this.roomsOriginal].sort((a,b) => {
        if (a.title > b.title) return 1;
        if (a.title < b.title) return -1;
        return 0;
    })
}

---

🤍 브라우저로 미리보기

---

💜 "가격순정렬" 버튼 및 기능 만들기

🤍 코드 작성하기

<button class="btn" @click="priceSort()">가격순정렬</button>

 

priceSort(){
    this.rooms = [...this.roomsOriginal].sort((a,b) => a.price - b.price)
}

---

🤍 브라우저로 미리보기

---

💜 "가격역순정렬" 버튼 및 기능 만들기

🤍 코드 작성하기

<button class="btn" @click="priceReverseSort()">가격역순정렬</button>

 

priceReverseSort(){
    this.rooms = [...this.roomsOriginal].sort((a,b) => b.price - a.price)
}

---

🤍 브라우저로 미리보기

---

💜 "50만원이하" 버튼 및 기능 만들기

🤍 코드 작성하기

<button class="btn" @click="under50priceFilter()">50만원이하</button>

 

under50priceFilter(){
    this.rooms = [...this.roomsOriginal].filter((room) =>  room.price <= 500000)
}

---

🤍 브라우저로 미리보기

---

💜 "원래대로" 버튼 및 기능 만들기

🤍 코드 작성하기

<button class="btn" @click="sortBack()">원래대로</button>

 

sortBack(){
    this.rooms = [...this.roomsOriginal];
}

---

🤍 브라우저로 미리보기