[Vue.js] 12. 정렬

sort()

• 원본 데이터를 변형

var array = [3, 5, 2];
array.sort(function(a, b) {
    return a - b // 음수면 a를 왼쪽으로 보냄
});

 

ex)

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

<script>
import data from './assets/data';
export default {
    name: 'App',
    data() {
        return {
            ...
        };
    },
    methods: {
        priceSort() {
            this.data.sort(function (a, b) {
                return a.price - b.price;
            });
        },
    },
};
</script>

 

 

 

순서 되돌리기

• 원형 데이터 보존 - spread operator 사용하기

<button @click="sortBack()">정렬초기화</button>

<script>
import data from './assets/data';
export default {
    name: 'App',
    data() {
        return {
            data: data,
            originData: [...data], // array/object 데이터의 사본을 만들 때 [...array자료]
        };
    },
    methods: {
        sortBack() {
            this.data = [...this.originData];
        },
    },
};
</script>