[VUE] 페이지네이션 API

 

 

타입 정의

src/interface/page.ts

export interface PageType {
  order: string,
  page: number,
  take: number,
}

 

API 정의

src/apis/page.ts

/* 사전신청 조회 */
export const getReserve = (params: PageType): Promise<AxiosResponse> => {
  const res = axiosInstance.get('manager/xxxxxx/list', { params });
  return res;
};

 

타입 불러와서 param 정의하기

API 불러와서 param을 패러미터로 넣고 List에 담기

src/views/Main.vue

const param: PageType = {
  order: 'DESC',
  page: 1,
  take: 30,
};

// 사전예약 조회 table
const reservationList = ref<any[]>([]);
const getReservationList = async () => {
  try {
    const result = await getReserve(param);
    console.log(result);
    reservationList.value = result.data;
  } catch (error) {
    console.log(error);
  }
};

  <table>
    <tr>
      <th><input type="checkbox"></th>
      <th>번호</th>
      <th>전화번호</th>
      <th>이름</th>
      <th>메모</th>
    </tr>
    <tr
      v-for="reservation in reservationList.items"
      :key="reservation.id"
    >
      <td><input type="checkbox"></td>
      <td>{{ reservation.id }}</td>
      <td>{{ reservation.phoneNumber }}</td>
      <td>{{ reservation.name }}</td>
      <td>{{ reservation.memo }}</td>
    </tr>
  </table>