VDataTableServer의 must-sort 속성 활용

현재 나는 Vue3와 Vuetify를 통해 Admin페이지를 만들고 있다

여기서 데이터테이블을 그리기 위해 VDataTableServer를 활용하고 있는데

정렬 부분에서 막혔다

 

↕️ VDataTableServer 내의 정렬

VDataTableServer에서는 기본적으로 update:sort-by 등을 통해 정렬을 구현할 수 있다

https://vuetifyjs.com/en/api/v-data-table-server/#events-update:sortBy

https://vuetifyjs.com/en/api/v-data-table-server/#events-update:sortBy

하지만 이것은 단순히 프론트에서 정렬을 시킬 뿐이고, 해당 페이지 내에서의 정렬이다.

 

내가 구현하고자 하는 것은 백엔드가 보낸 전체 데이터에 대한 정렬이고 이는 보통 백엔드에 정렬을 요청하여 백엔드가 정렬된 데이터를 보내주는 방식으로 이루어진다

그러면 프론트는 정렬 버튼을 누를 때 적절한 파라미터와 값을 통해 정렬 데이터를 요청하고 받아온 값을 데이터 테이블 상에 보여주면 된다.

 

😶‍🌫️ 막혔던 부분

일단 headers 배열 각 요소(객체)내에 sorted: true를 통해 버튼을 나타내고 해당 버튼을 누르면 백엔드로 ASC 혹은 DESC 요청을 보내도록 구현했다.

그런데 정렬 버튼을 누르면 ASC가 두 번 DESC가 한 번 이런 주기로 요청이 됐다.

(첫 번째 클릭: ASC → 두 번째 클릭: ASC → 세 번째 클릭: DESC → 네 번째 클릭: ASC → 다섯 번째 클릭: ASC → 여섯 번째 클릭: DESC ... )

심지어 ASC 요청 중 한 번은 버튼이 비활성화되듯 색이 바뀌기도 했다.

 

💡 해결 방법

일단 이 부분을 if else문으로 막아보려했지만 전혀 먹히지 않았다

이 포인트에서 이것은 기본 제공되는 기능 때문이라고 생각하여 더 탐구해본 결과

Vuetify의 <VDataTableServer>에서 제공되는 정렬 버튼은 기본적으로 기본 상태(정렬 없음) → 오름차순 → 내림차순의 3단계 순환 로직을 가지고 있었다

이것을 오름차순 ↔ 내림차순의 2 단계로 제한하려면 

must-sort 속성을 활용해야한다

https://vuetifyjs.com/en/api/v-data-table-server/#props-must-sort

https://vuetifyjs.com/en/api/v-data-table-server/#props-must-sort

 

이를 통해 '기본 상태'를 제거하여 오름차순 ↔ 내림차순만 순환할 수 있다.

단순히 태그 안에 넣어주기만 하면 된다

<VDataTableServer
	... 기타 속성과 옵션들
    must-sort
    ... 기타 속성과 옵션들
>


</VDataTableServer>

 

 

 

정말 간단한 방법인데 저걸 몰라서 오래 헤맸었다...

 

 

 

 

신입 Vue3 프론트엔드 개발자로서 문제를 해결해나갔던 부분들을 기록중입니다. 혹시 잘못된 정보가 있거나 더 효율적이고 확장성 있는 다른 방법이 있다면 댓글로 공유해주세요!