Vuetify - 페이지 매기는 방법?

Vuetify - 페이지 매기는 방법?

VueJ에 Vuetify 프레임워크의 페이지 번호를 사용하고 싶다.

Vuetify의 페이지 구성 요소:

<v-pagination
        v-model="pagination.page"
        :length="pagination.total / 5"
        :total-visible="pagination.visible"
></v-pagination>

사용자가 버튼을 클릭했을 때 기능을 실행하고 싶다.페이지 번호를 취득한 후 이 페이지 번호를 파라미터로 사용하여 기능을 실행하고 싶습니다.

getItems의 메서드 코드:

this.pagination.page = response.body.page
this.pagination.total = response.body.total
this.pagination.perPage = response.body.perPage

데이터:

data () {
  return {
    items: [],
    pagination: {
      page: 1,
      total: 0,
      perPage: 0,
      visible: 7
    }
  }
}

이벤트 섹션의 문서를 확인합니다.새 페이지를 처리하기 위한 입력 이벤트를 찾았습니다.

<v-pagination
  v-model="pagination.page"
  :length="pagination.pages"
  @input="next"
></v-pagination>

그리고 다음 방법:

next (page) {
  api.getBillList(page)
    .then(response => {
      this.bills = response.data.content
      console.log(this.bills)
    })
    .catch(error => {
      console.log(error)
    })
}

코멘트:
페이지 매김을 실장하기 전에, 애초에 정말로 필요한지를 확인해 주세요.그렇지 않으면 다음 방법을 사용할 수 있습니다.
https://https.engineering/https-api-html-1c1f644f8e12
https://dzone.com/articles/why-most-programmers-get-pagination-wrong
http://allyouneedisbackend.com/blog/2017/09/24/the-sql-i-love-part-1-scanning-large-table/
https://www.xarg.org/2011/10/optimized-pagination-using-mysql/
https://www.eversql.com/faster-pagination-in-mysql-why-order-by-with-limit-and-offset-is-slow/

---

---

답변:

반응할 수 있습니다.pagination.page이후 감시자와 함께 변화하다pagination.page버튼 클릭 시 변경 후 실행한다.method.

watch: {
    "pagination.page": (newPage) => {
        this.onPageChange(newPage);
    }
}

또는 컴포넌트의input이벤트:

<v-pagination
    @input="onPageChange"
></v-pagination>

VueJS 프로젝트에서 이 페이지네이션 구현을 위해 받은 오류를 검색한 후 여기에 도착했습니다.[Vue warn]: Invalid prop: custom validator check failed for prop "length"..

제 문제는, 질문의 코드 예에서 볼 수 있는 문제인 것 같습니다만, 길이를 계산하면 십진법에 도달하는 것이었습니다.예를 들어, 23개의 레코드와 5개의 페이지 사이즈가 있으면 4.6이 반환되어 위의 오류가 발생합니다.적절한 길이에 도달하기 위해 계산을 Math.ceil()로 정리해야 했습니다.

이것이 누군가에게 도움이 되기를 바랍니다:)

<v-pagination
   v-model="currPage"
   :length="Math.ceil(arr.length / pageSize)"
   :total-visible="6"
></v-pagination>

언급URL : https://stackoverflow.com/questions/47458234/vuetify-how-to-make-pagination