Vue アプリケーションでページネーションを実装する方法

あなたのような読者が MUO をサポートします。当社サイトのリンクを使用して商品を購入すると、アフィリエイト手数料が発生する場合があります。続きを読む。

ページネーションを使用すると、大きなデータセットを、より小さく管理しやすいチャンクに分割できます。ページネーションにより、ユーザーは大規模なデータセットを簡単にナビゲートし、探している情報を見つけることができます。

今日のMUOビデオ スクロールしてコンテンツを続けてください

このサンプルプロジェクトを使用して、このテクニックとそれを Vue で実装する方法について学びます。

Vue-Awesome-Paginate を使ってみる

Vue-awesome-ページネーションは、ページ分割されたデータ表示を作成するプロセスを簡素化する、強力で軽量な Vue ページ分割ライブラリです。カスタマイズ可能なコンポーネント、使いやすい API、さまざまなページネーションシナリオのサポートなど、包括的な機能を提供します。

vue-awesome-paginate の使用を開始するには、プロジェクトディレクトリで次のターミナルコマンドを実行してパッケージをインストールします。

 npm install vue-awesome-paginate

次に、Vue アプリケーションで動作するようにパッケージを構成するには、以下のコードを src/main.js ファイル：

 import { createApp } from "vue"; 
import App from "./App.vue"; 
 
import VueAwesomePaginate from "vue-awesome-paginate"; 
 
import "vue-awesome-paginate/dist/style.css"; 
 
createApp(App).use(VueAwesomePaginate).mount("#app");

このコードは、パッケージをインポートして登録します。 。使用（） メソッドなので、アプリケーションのどこでも使用できます。ページネーションパッケージには CSS ファイルが付属しており、コードブロックはそれもインポートします。

Test Vue アプリケーションの構築

vue-awesome-paginate パッケージがどのように機能するかを説明するために、サンプルデータセットを表示する Vue アプリを構築します。あなたはなれます Axios を使用して API からデータを取得するこのアプリの場合。

以下のコードブロックを app.vue ファイル：

古いハードドライブをどうするか

 <script setup> 
import { ref, onBeforeMount } from "vue"; 
import axios from "axios"; 
 
const comments = ref([]); 
 
const loadComments = async () => { 
  try { 
    const response = await axios.get( 
      `https://jsonplaceholder.typicode.com/comments`, 
    ); 
 
    return response.data.map((comment) => comment.body); 
  } catch (error) { 
    console.error(error); 
  } 
}; 
 
onBeforeMount(async () => { 
  const loadedComments = await loadComments(); 
  comments.value.push(...loadedComments); 
  console.log(comments.value); 
}); 
</script> 
 
<template> 
  <div> 
    <h1>Vue 3 Pagination with JSONPlaceholder</h1> 
    <div v-if="comments.length"> 
      <div v-for="comment in comments" class="comment"> 
        <p>{{ comment }}</p> 
      </div> 
    </div> 
    <div v-else> 
      <p>Loading comments...</p> 
    </div> 
  </div> 
</template>

このコードブロックでは、 Vue 構成 API コンポーネントを構築します。このコンポーネントは、Vue がマウントする前に、Axios を使用して JSONPlaceholder API からコメントを取得します ( onBeforeMount 針）。その後、コメントを コメント 配列、テンプレートを使用してそれらを表示するか、コメントが利用可能になるまで読み込みメッセージを使用します。

Vue-Awesome-Paginate を Vue アプリに統合する

これで、API からデータを取得する単純な Vue アプリが完成しました。これを変更して vue-awesome-paginate パッケージを統合できます。このページネーション機能を使用して、コメントを複数のページに分割します。

交換してください脚本あなたのセクション app.vue このコードを含むファイル:

 <script setup> 
import { ref, computed, onBeforeMount } from 'vue'; 
import axios from 'axios'; 
 
const perPage = ref(10); 
const currentPage = ref(1); 
const comments = ref([]); 
 
const onClickHandler = (page) => { 
  console.log(page); 
}; 
 
const loadComments = async () => { 
  try { 
    const response = await axios.get( 
      `https://jsonplaceholder.typicode.com/comments` 
    ); 
 
    return response.data.map(comment => comment.body); 
  } catch (error) { 
    console.error(error); 
  } 
}; 
 
onBeforeMount(async () => { 
  const loadedComments = await loadComments(); 
  comments.value.push(...loadedComments); 
  console.log(comments.value); 
}); 
 
const displayedComments = computed(() => { 
  const startIndex = (currentPage.value * perPage.value) - perPage.value; 
  const endIndex = startIndex + perPage.value; 
  return comments.value.slice(startIndex, endIndex); 
}); 
</script>

このコードブロックは、さらに 2 つのリアクティブ参照を追加します。 1ページあたり そして 現在のページ 。これらの参照には、ページごとに表示する項目の数と現在のページ番号がそれぞれ保存されます。

このコードは、次の名前の計算済み参照も作成します。 表示されるコメント 。これは、コメントの範囲を以下に基づいて計算します。 現在のページ そして 1ページあたり 価値観。のスライスを返します。 コメント その範囲内の配列で、コメントが別のページにグループ化されます。

さて、交換してください テンプレート App.vue ファイルのセクションに次の内容を追加します。

 <template> 
  <div> 
    <h1>Vue 3 Pagination with JSONPlaceholder</h1> 
 
    <div v-if="comments.length"> 
      <div v-for="comment in displayedComments" class="comment"> 
        <p>{{ comment }}</p> 
      </div> 
 
      <vue-awesome-paginate 
        :total-items="comments.length" 
        :items-per-page="perPage" 
        :max-pages-shown="5" 
        v-model="currentPage" 
        :onclick="onClickHandler" 
      /> 
    </div> 
    <div v-else> 
      <p>Loading comments...</p> 
    </div> 
  </div> 
</template>

の v-for リストをレンダリングするための属性このテンプレートセクションでは、 表示されるコメント 配列。テンプレートにより追加されるのは、 vue-awesome-ページネーション コンポーネント。上記のスニペットはこのコンポーネントに props を渡します。これらおよび追加の小道具について詳しくは、パッケージの公式ページをご覧ください。 GitHub 上のドキュメント。

アプリケーションのスタイルを設定すると、次のようなページが表示されるはずです。

番号の付いた各ボタンをクリックすると、異なるコメントのセットが表示されます。

Netflixが機能しないのはなぜですか

ページネーションまたは無限スクロールを使用してデータの閲覧を改善する

これで、データを効率的にページ分割する方法を示す、非常に基本的な Vue アプリが完成しました。無限スクロールを使用して、アプリケーション内の長いデータセットを処理することもできます。ページネーションと無限スクロールには長所と短所があるため、選択する前に必ずアプリのニーズを考慮してください。