So implementieren Sie Paginierung in einer Vue-Anwendung

Mit der Paginierung können Sie große Datenmengen in kleinere, besser verwaltbare Teile unterteilen. Die Paginierung erleichtert Benutzern die Navigation in großen Datensätzen und das Auffinden der gesuchten Informationen.

Erste Schritte mit Vue-Awesome-Paginate

Vue-awesome-paginate ist eine leistungsstarke und leichte Vue-Paginierungsbibliothek, die den Prozess der Erstellung paginierter Datenanzeigen vereinfacht. Es bietet umfassende Funktionen, darunter anpassbare Komponenten, benutzerfreundliche APIs und Unterstützung für verschiedene Paginierungsszenarien.

Um vue-awesome-paginate zu verwenden, installieren Sie das Paket, indem Sie diesen Terminalbefehl in Ihrem Projektverzeichnis ausführen:

npm install vue-awesome-paginate

Um das Paket dann so zu konfigurieren, dass es in Ihrer Vue-Anwendung funktioniert, kopieren Sie den folgenden Code in die Datei 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");

Dieser Code importiert und registriert das Paket mit der .use()- Methode, sodass Sie es überall in Ihrer Anwendung verwenden können. Das Paginierungspaket enthält eine CSS-Datei, die der Codeblock auch importiert.

Erstellen der Test Vue-Anwendung

Um zu veranschaulichen, wie das vue-awesome-paginate-Paket funktioniert, erstellen Sie eine Vue-App, die einen Beispieldatensatz anzeigt. Für diese App rufen Sie Daten von einer API mit Axios ab .

Kopieren Sie den folgenden Codeblock in Ihre App.vue- Datei:

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

Dieser Codeblock verwendet die Vue Composition API zum Erstellen einer Komponente. Die Komponente verwendet Axios, um Kommentare von der JSONPlaceholder-API abzurufen, bevor Vue sie bereitstellt ( onBeforeMount- Hook). Anschließend werden die Kommentare im Kommentararray gespeichert und mithilfe der Vorlage oder einer Ladenachricht angezeigt, bis Kommentare verfügbar sind.

Integrieren Sie Vue-Awesome-Paginate in Ihre Vue-App

Jetzt haben Sie eine einfache Vue-App, die Daten von einer API abruft. Sie können sie ändern, um das Paket vue-awesome-paginate zu integrieren. Mit dieser Paginierungsfunktion können Sie die Kommentare auf verschiedene Seiten aufteilen.

Ersetzen Sie den Skriptabschnitt Ihrer App.vue- Datei durch diesen Code:

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

Dieser Codeblock fügt zwei weitere reaktive Referenzen hinzu: perPage und currentPage . Diese Referenzen speichern die Anzahl der pro Seite anzuzeigenden Elemente bzw. die aktuelle Seitenzahl.

Der Code erstellt außerdem eine berechnete Referenz mit dem Namen displayComments . Dadurch wird der Bereich der Kommentare basierend auf den Werten „currentPage“ und „perPage“ berechnet . Es gibt einen Ausschnitt des Kommentararrays innerhalb dieses Bereichs zurück, wodurch die Kommentare auf verschiedenen Seiten gruppiert werden.

Ersetzen Sie nun den Vorlagenabschnitt Ihrer App.vue-Datei durch Folgendes:

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

Das v-for-Attribut zum Rendern von Listen in diesem Vorlagenabschnitt verweist auf das Array displayedComments. Die Vorlage fügt die Komponente „vue-awesome-paginate“ hinzu, an die das obige Snippet Requisiten übergibt.

Nachdem Sie Ihre Anwendung gestaltet haben, sollten Sie eine Seite erhalten, die wie folgt aussieht:

Klicken Sie auf die einzelnen nummerierten Schaltflächen, um unterschiedliche Kommentare anzuzeigen.

Verwenden Sie Paginierung oder unendliches Scrollen für eine bessere Datendurchsuchung

Sie verfügen jetzt über eine sehr einfache Vue-App, die zeigt, wie Sie Daten effizient paginieren. Sie können auch unendliches Scrollen verwenden, um lange Datensätze in Ihrer Anwendung zu verarbeiten. Stellen Sie sicher, dass Sie die Anforderungen Ihrer App berücksichtigen, bevor Sie sich entscheiden, da Paginierung und unendliches Scrollen Vor- und Nachteile haben.