web-dev-qa-db-ja.com

Vuetify-ページネーションを行う方法？

VueJSの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
    }
  }
}

enter image description here

paginationvue.jsvuejs2vuetify.js
8
pirmax

イベントセクションのドキュメントをご覧ください。新しいページを処理する入力イベントを見つけました。

<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)
    })
}
11
HoLiC