はじめに半年前にクライアント用に、Vue.jsでフィルター付きリストページを作りました。幸いにしてクライアントが良く使ってくれているようで、データ量が増大していきました。開発当初は、1秒も掛からなかったページの表示(レンダリング)が、2秒、3秒とだんだん遅くなっていきました。これはまずいと思い、ページネーションを実装することにしました。「vuejs-paginate」を使ってページネーションを実装するしかし、1つ問題がありました。ページネーション付きのリストにフィルター機能を付属するにはどうしたら良いのだろう?というわけで試しに作ってみました。外部ファイルサンプルにBootstrapベースのCSSで、ページネーションにvuejs-paginateを使用します。設置してページネーションを用意します。</paginate></div>スクリプト今回の一番重要なポイントは、フィルターの入力をされた時にwatchにて検知することです。検知した際にページネーションの現在のページを1ページ目に変更しています。これをしないと、現在ページだけ置いてけぼりになってしまいます。}});サンプル>>専用ページで確認する最後にフィルター機能付きのテーブルにページネーションを付ける方法でした。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。