상품정렬기능과 데이터 원본보존

원래 js로 상품을 정렬하려면 데이터를 정렬해주고, html에 반영해주세요 이 순서로 짜야하는데,

vue에서는 데이터바인딩이 잘 되어 있다면, 데이터만 정렬하면 실시간으로 자동 반영이 된다.

<button @click="priceSort">가격순정렬</button>

이렇게 버튼을 만들고, 함수 내용이 기니까, priceSort란 함수를 methods오브젝트에 만들어서 사용해보자.

methods : {
    priceSort() {
      this.원룸들.sort(function(a,b) {
        return a.price - b.price
      });
    },
},

이렇게 this.원룸들에 sort함수를 붙여주면 문자정렬인데, 내부에 콜백함수를 넣어서 a-b를해서 음수면 a를 왼쪽으로 보내주는 기능을 이용해서 가격이 낮은 순으로 정렬해주게 된다.

 

원래대로 버튼도 만들어보자.

data() {//데이터 보관함
    return {
      원룸들오리지널 : [...data],
      오브젝트 : { name : 'Kim', age : 20 },
      누른거 : 0,
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

먼저, 원룸들오리지널이란 데이터의 원형을 보존해야 할 공간을 만들어서, spread문법으로 복사해주고,

methods : {
    priceSort() {
      this.원룸들.sort(function(a,b) {
        return a.price - b.price
      });
    },
    sortBack() {
      this.원룸들 = [...this.원룸들오리지널];
    }
 },

sortBack이란 함수를 만들어서 this.원룸들에 this.원룸들오리지널을 넣어주면 원상복구가 된다. 넣을때도 복사본을 만들어서 넣어야지 원본을 넣게되면 어레이에서 등호는 두 값을 공유해주세요 란 뜻이므로, 몇번하다보면 작동하지 않게 된다.