이번에는 vue.js의 data table 구성 시, loading상태에 대한 처리관련하여 발생이 가능한 고민거리에 대해서 생각해 보고자 합니다. 사실상 vuetify에서 제공하는 UI components를 main으로 사용하기로 했기 때문에 대부분이 제공되는 기능입니다.
이번에 생각해보고자 하는 부분은 API로 받아온 데이터를 table에 뿌려줄때, 해당 데이터를 가져오는 중에는 progress bar로 표시를 해주고 데이터 로딩이 완료된다면... progress bar를 종료시키는 기능입니다.
v-data-table에서는 해당 기능을 loading이라는 property로 완성합니다. 이렇게 간단하게 구현이 가능한데... 왜 이렇게 생각까지 해야할까요?? 문제상황은 아래와 같습니다.
API로 받아오는 데이터의 로딩이 끝났음에도, v-data-table의 progress bar가 계속 동작함
loading progress bar is not stopped after data loading in v-data-table
1. 문제상황
우선 v-data-table을 사용해서 loading을 구현한 code를 살펴보고, 데이터 로딩전과 데이터 로딩후의 화면을 확인해 보겠습니다.
[소스코드]
<template>
<v-app id="CorpInfo">
<div>
{{test}}<p>
<v-data-table
:headers="headers"
:items="items"
loading
loading-text="Loading... Please wait"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
@page-count="pageCount = $event"></v-data-table>
<div class="text-center pt-2">
<v-pagination
v-model="page"
:length="pageCount"
:total-visible="totalVisible"
next-icon="mdi-menu-right"
prev-icon="mdi-menu-left"></v-pagination>
</div>
</div>
</v-app>
</template>
<script>
import axios from 'axios';
export default{
data() {
return {
text: 'Welcome to AyoteraLab',
page: 1,
pageCount: 0,
itemsPerPage: 10,
totalVisible: 10,
headers: [
{ text: '회사명', align: 'center', sortable: false, value: 'corpName' },
{ text: '회사코드', align: 'center', sortable: false, value: 'corpCode' },
{ text: '종목코드', align: 'center', sortable: false, value: 'stockCode' },
{ text: '수정일자', align: 'center', sortable: false, value: 'modifyDate' },
],
items: [],
};
},
};
</script>
<style>
</style>
[적용결과 - 데이터 없을경우]
보시면 v-data-table내 prop중에 items에 적재된 데이터가 없다면, loading-text에 정의된 text가 보이게 됩니다. 그리고 정상적으로 progress bar가 표시되게 됩니다. 그렇다면... items에 데이터를 넣어보도록 하겠습니다.
[적용결과 - 데이터 있는경우]
데이터를 정상적으로 보이네요~ 어라!!! 하지만 progress bar는 그대로 있네요?? loading이 정상적으로 동작하지 않음을 확인했습니다. 그렇다면 어떻게 해야할까요?? 일단 느낌적인 느낌으로 loading prop는 동작/비동작 일테니... true/false인 boolean으로 판단해 보고 진행해 보겠습니다.
코드에서 보면 loading은 script의 data영역을 참조하지 않는 prop로 정의되어 있습니다. 이를 참조하는 방식으로 바꾸로 강제로 값을 지정해 보겠습니다.
<template>
<v-app id="CorpInfo">
<div>{{text}}<p/></div>
<div>
<v-data-table
:headers="headers"
:items="items"
=========================================================================
loading
:loading="loading"
=========================================================================
loading-text="Loading... Please wait"
:page.sync="page"
:items-per-page="itemsPerPage"
hide-default-footer
class="elevation-1"
@page-count="pageCount = $event"></v-data-table>
</div>
</v-app>
</template>
<script>
export default{
data() {
return {
loading: false,
};
},
};
</script>
<style>
</style>
다음과 같이 loading을 data영역을 참조하는 prop로 :loading으로 변경을 해주고... data( )내에서 원하는 변수로 매핑을 해 줍니다. 저는 그냥 이름을 동일하게 지정했습니다. 그리고 false로 해주면 아마 동작을 중지할 것입니다. 그렇다면 최종적으로는 어떻게 처리를 해야할까요??
만약에 axios를 통해서 API의 데이터를 가져오고 items에 데이터를 매핑하고나서,
this.loading = false
해주는 방식으로 구현이 가능하게 되는 것 입니다.
[적용결과]
잘되네요... vuetify의 UI components에 sample로 제공되는 아이들은... 내부에 prop들을 data를 참조하는 방식으로 변경하여 자유자재로 변경이 가능합니다.
- Ayotera Lab -
댓글