Vue3 To do list 만들기 (10) Pagination , WatchEffect

부트 스트랩에 있는 Pagination을 활용하여 Todolist에 출력되는 리스트를 조절할 예정이다

먼저 부트스트랩!

Pagination

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

부모 컴포넌트 App.vue 안에 getTodolist 함수를 변형할 예정인데..

let getTodolist = async (page) => {
  currentpage.value = page;
  try {
    let res = await axios.get(
      //"http://localhost:3000/todolist"
      `http://localhost:3000/todolist?_page=${page}&_limit=${limit}`
    );
    totalTodolist.value = res.headers["x-total-count"];

    todolist.value = res.data;
    //console.log(res.data[0].sbj);
  } catch (err) {
    console.log(err);
  }
};

json-server에서 사용되는 페이지 출력 방식이라 간단하게 설명하고 넘어가자면,

?_page=(처음 시작할 번호)&_limit-(출력할 리스트) -> 여기서만 사용되는 로직이라 크게 중요하지 않다 

 

res.headers를 콘솔로 찍어보면 여러가지가 나오는데, 위에서 출력락을 걸었기 때문에 db에서 불러오는 전체 개수를 확인할 방법으로 res.headers안에 x-total-count를 참조하면된다. (totalTodolist ref변수 업데이트)

 

const totalpage = computed(() => {
  return Math.ceil(totalTodolist.value / limit);
});

total page는 computed()함수를 사용하여 (내부 값이 변경되는것을 감지하여 ref값 업데이트에 사용하기 좋다)

limit은 한페이지에 5개씩 출력하려고 let limit=5로 위에서 정의하여 두었다.

올림값을 totalpage에 저장한다.

 

부모 컴포넌트에서 만든 값들을 자식 컴포넌트로 보내기 위해서 props를 사용할예정인데 먼저

    <TodoList
      :todolist="searchTodolist"
      @toggle-todo="toggleTodo"
      @delete-item="deleteitem"
      :totalpage="totalpage"
      :getTodolist="getTodolist"
      :currentpage="currentpage"
    />
    //app.vue

컴포넌트에 바인드 해주고

const props = defineProps({
  todolist: {
    type: Array,
    required: true,
  },
  totalpage: { type: Number },
  getTodolist: { type: Function },
  currentpage: { type: Number },
});

//todoList.vue

자식 컴포넌트에서 props로 값을 받아왔다.

---

자식 컴포넌트 중 하나인 Todolist.vue에 pagination을 달아준다

  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li
        class="page-item"
        v-for="i in totalpage"
        :class="i === currentpage ? 'active' : ''"
        :key="i"
      >
        <a class="page-link" @click="getTodolist(i)">{{ i }}</a>
      </li>
    </ul>
  </nav>
  //todolist.vue

previous와 next는 과감히 삭제하여 알짜배기만 보자면

li안에 v-for를 통해  부모 컴포넌트에서 받아온 totalpage(올림된 값)만큼 for문을 돌린다

 

active는 현재 클릭된 li 색칠을 위한 부트스트랩 클래스

클릭될때 @click=""을 통해 getTodolist(i)를 호출하는데

i는 현재 페이지 번호를 page로 받아 부모 안의 변수인 currentpage.value 값을 업데이트 해준다.

 

watchEffect

 

---

import { watchEffect } from "vue"

 

vue에서 import 

 

watchEffect(() => {
  console.log("currentpage" + currentpage.value);
});

함수안에 적혀있는 변수 의 값에 수정이 발견될경우 같이 실행되는 기능이다