現在このサイトを見ながらページネーションを実装しております。
【vue.js】 Vuetifyで簡単ページネーション(Paginations)
やりたい事はselectBoxに表示した件数を押すと、ページ内の表示件数も変わるという事をやりたいです。
現状は、
出来ている事:
・selectBoxの件数押下→ページネーションのページ番号ボタンが増減します。
・ページ番号押下→対象のページが表示されます
出来ていない事:
・selectBoxを押下→displayListsで表示されるlistも増減させたい。
これで動くと思っていたのですが、なぜうまく行かないのか分かっていません。
どなたかアドバイス頂けると幸いです
<template> <v-app> <v-app-bar app> <v-toolbar-title> <span>Vuetify Pagination</span> </v-toolbar-title> </v-app-bar> <v-content> <select v-model="pageSize" name="number"> <option v-for="display in selectList" :key="display" :value="display"> 表示件数 {{ display }}件 </option> </select> テスト:{{ pageSize }} <div class="text-center"> <v-list> <v-list-item v-for="list in displayLists" :key="list.index"> <v-list-item-content> <v-list-item-title>{{ list.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> <v-pagination v-model="page" :length="compLength" @input="pageChange" /> </div> </v-content> </v-app> </template> <script> export default { name: 'App', data () { return { page: 1, length: 0, lists: [], displayLists: [], pageSize: 10, // selectBox selectList: [5, 10, 15] } }, computed: { //ページネーションの番号が選択した件数によって増減します。 compLength () { return Math.ceil(this.lists.length / this.pageSize) } }, mounted () { //データです(100件) this.lists = new Array(99).fill().map((v, i) => { return { id: i, title: 'Title' + i } }) //アクセス時に表示される内容(ここが良く分かっていません) this.displayLists = this.lists.slice(this.pageSize * (this.page - 1), this.pageSize * (this.page)) }, methods: { //ページ番号を押すと表示されるデータが変わる pageChange (pageNumber) { this.displayLists = this.lists.slice(this.pageSize * (pageNumber - 1), this.pageSize * (pageNumber)) } } } </script>
あなたの回答
tips
プレビュー