[Vue] Sort & Shallow Copy

JeongChaeJin·2022년 7월 25일
0

VuejsStudy

목록 보기
10/19

sort

  • array.sort(function() {})
    • 문자 정렬
  • array.sort(function(a, b) { return a - b })
    • 숫자 정렬
<script>

import data from './assets/post';
import DiscountSection from './DiscountSection.vue';
import ModalWindow from './ModalWindow.vue';
import TheCard from './TheCard.vue';


export default {
  name: 'App',
  data() {
    return {
      clickedNum : 0,  
      isModalOpen: false,
      신고수 : 0,
      menus : ["Home", "Shop", "About"],
      originalProducts : [...data],
      products : data,
    }
  },
  methods: {
    increase() {
      this.신고수 += 1;
    },
    priceSort() {
      this.products.sort(function(a, b) {
        return a.price - b.price
      })
    },
    sortBack() {
      this.products = [...this.originalProducts];
    }
  },
  components: {
    DiscountSection : DiscountSection,
    ModalWindow : ModalWindow,
    TheCard : TheCard,
  }
}
</script>
  • method를 지정하고, onclick과 같은 곳에서 지정하면 된다.
  • [...data]는 copy 본을 담는 것이다. sort하는 경우 같은 데이터를 지정해놨기 때문에 문제가 있을 수 있다.
    • 그러므로 다른 사본을 넣어놔야된다.
profile
OnePunchLotto

0개의 댓글