[Vue]정렬

1. 가격순으로 정렬해주는 버튼 생성

 <button @click="sortByPriceUp">낮은가격순</button>
    <button @click="sortByPriceDown">높은가격순</button>
    <button @click="sortByHan">가나다순</button>
    <button @click="setOriginal">원래대로</button>

2. script에 함수 생성

 sortByPriceUp(){
      this.products.sort(function(a,b){
        return a.price-b.price
      })
    },
    sortByPriceDown(){
      this.products.sort(function(a,b){
        return b.price-a.price
      })
    },
    sortByHan(){
      this.products.sort(function(a,b){
        return a.title.localeCompare(b.title);
      })
    },

    setOriginal(){
      this.products=[...this.productsOriginal]
    }

3. 데이터 보존 지향

products: data,
productsOriginal: [...data], 

왜 그냥 data를 쓰지 않는가?
->같은 주소를 공유하게 되기 때문
->[...array] 사본을 만들어 주세요 라는 뜻
-> =: 값을 공유해주세요 라는 뜻
-> this.products=this.productsOriginal 하면 영킴
->this.products=[...this.productsOriginal]으로 방지