Vuetify 외부 페이지 번호가 표시되지 않음

Vuetify 외부 페이지 번호가 표시되지 않음

v-data-table이 있으며 여기에 페이지 수를 추가하려고 합니다.여기 샘플 문서를 따라가 보니 제가 뭘 잘못하고 있는지 알 수가 없네요.컴포넌트가 생성되면 백엔드로 호출하여 항목 목록을 채웁니다.그런 다음 데이터 테이블로 전달됩니다.

검색창도 있는데 거기에 뭘 입력하면 페이지 번호가 뜬다.

HTML

<v-data-table
      :headers="headers"
      :items="incidents"
      :search="search"
      :pagination.sync="pagination"
      hide-actions
      class="elevation-1"
      item-key="incident_number"
    >

</v-data-table>

 /* table row html in between */

<div class="text-xs-center pt-2">
      <v-pagination v-model="pagination.page" :length="pages" </v-pagination>
</div>

JS

예시와 같이 페이지 번호를 계산하는 계산 속성이 있습니다.

computed: {
      pages ()
      {
        if (this.pagination.rowsPerPage == null || this.pagination.totalItems == null)
        {
          return 0
        }

        return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)

      },
    }

문제를 해결했다.검색창에 뭔가를 입력하면 작동하기 때문에 Vue에서 이벤트를 내보내고 있는 것을 알 수 있었습니다. update:pagination이 안에 중요한 가치가 있다totalItems그리고 그것은 로 설정되었다.0페이지 로딩 시 검색창에 뭔가를 입력하면 그 뒤에 값이 표시됩니다.

페이지 로드 중

이 문제를 해결하려면 백엔드가 테이블 데이터와 함께 응답을 반환할 때.설정했습니다.totalItems테이블 내의 엔트리 수까지를 지정합니다.

this.incidents = response.data['incidents']
this.pagination.totalItems = this.incidents.length

검색줄에 수정 또는 입력 사용

Vuetify v-data-table의 버그 또는 문제인지 확실하지 않습니다.

언급URL : https://stackoverflow.com/questions/51989563/vuetify-external-pagination-not-displaying-page-numbers