質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

1240閲覧

v-pagenationでselectで選択した表示件数を元に画面をリアルタイムで描画したい

anzi1230

総合スコア19

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2021/12/27 11:47

現在このサイトを見ながらページネーションを実装しております。
【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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問