Vuetify - ページネーションの作成方法

Question

Vuetifyフレームワークのフレームワークを使用したいVueJS 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 
    } 
    } 
} 

Answer 1

イベントセクションのドキュメントをチェックアウトします。新しいページを処理する入力イベントが見つかりました。

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

Answer 2

あなたはbutto上pagination.page変化するためwatcherでpagination.page変化に反応することができますnをクリックし、methodを実行します。

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