Sådan implementeres paginering i en Vue-applikation

Sideinddeling lader dig opdele store datasæt i mindre, mere håndterbare bidder. Sideinddeling gør det nemmere for brugere at navigere i store datasæt og finde den information, de søger.

Lær om teknikken, og hvordan du implementerer den i Vue, med dette eksempelprojekt.

Kom godt i gang med Vue-Awesome-Paginate

Vue-awesome-pagete er et kraftfuldt og let Vue-pagineringsbibliotek, der forenkler processen med at oprette paginerede datavisninger. Det giver omfattende funktioner, herunder brugerdefinerbare komponenter, brugervenlige API'er og understøttelse af forskellige pagineringsscenarier.

For at begynde at bruge vue-awesome-paginate skal du installere pakken ved at køre denne terminalkommando i din projektmappe:

npm install vue-awesome-paginate

Derefter, for at konfigurere pakken til at fungere i din Vue-applikation, skal du kopiere koden nedenfor til src/main.js fil:

import { createApp } from"vue";
import App from"./App.vue";
import VueAwesomePaginate from"vue-awesome-paginate";
import"vue-awesome-paginate/dist/style.css";





instagram viewer
createApp(App).use(VueAwesomePaginate).mount("#app");

Denne kode importerer og registrerer pakken med .brug() metode, så du kan bruge den overalt i din applikation. Pagineringspakken kommer med en CSS-fil, som kodeblokken også importerer.

Opbygning af Test Vue-applikationen

For at illustrere, hvordan vue-awesome-paginate-pakken fungerer, skal du bygge en Vue-app, der viser et eksempeldatasæt. Du vil være hente data fra en API med Axios til denne app.

Kopier kodeblokken nedenfor til din App.vue fil:

<scriptsetup>
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 JSONPlaceholderh1>
<divv-if="comments.length">
<divv-for="comment in comments"class="comment">
<p>{{ comment }}p>
div>
div>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Denne kodeblok bruger Vue Composition API at bygge en komponent. Komponenten bruger Axios til at hente kommentarer fra JSONPlaceholder API, før Vue monterer den (påBeforeMount krog). Det gemmer derefter kommentarerne i kommentarer array ved at bruge skabelonen til at vise dem eller en indlæsningsmeddelelse, indtil kommentarer er tilgængelige.

Integrering af Vue-Awesome-Paginate i din Vue-app

Nu har du en simpel Vue-app, der henter data fra en API, du kan ændre den for at integrere vue-awesome-paginate-pakken. Du vil bruge denne sideinddelingsfunktion til at opdele kommentarerne på forskellige sider.

Udskift manuskript afsnit af din App.vue fil med denne kode:

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

Denne kodeblok tilføjer yderligere to reaktive referencer: per Side og nuværende side. Disse referencer gemmer henholdsvis antallet af elementer, der skal vises pr. side, og det aktuelle sidetal.

Koden opretter også en beregnet ref navngivet viste kommentarer. Dette beregner rækkevidden af ​​kommentarer baseret på nuværende side og per Side værdier. Det returnerer et stykke af kommentarer array inden for dette område, som vil gruppere kommentarerne til forskellige sider.

Udskift nu skabelon sektionen af ​​din App.vue-fil med følgende:

<template>
<div>
<h1>Vue 3 Pagination with JSONPlaceholderh1>
<divv-if="comments.length">
<divv-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>
<divv-else>
<p>Loading comments...p>
div>
div>
template>

Det v-for attribut til gengivelse af lister i denne skabelonsektion peger på viste kommentarer array. Skabelonen tilføjer vue-fantastisk-sidete komponent, som uddraget ovenfor sender rekvisitter til. Du kan lære mere om disse og yderligere rekvisitter i pakkens officielle dokumentation på GitHub.

Efter styling af din ansøgning, bør du få en side, der ser sådan ud:

Klik på hver nummereret knap, og du vil se et andet sæt kommentarer.

Brug sideinddeling eller uendelig rulning for bedre databrowsing

Du har nu en meget grundlæggende Vue-app, der viser, hvordan man effektivt paginerer data. Du kan også bruge uendelig rulning til at håndtere lange datasæt i din applikation. Sørg for at overveje din apps behov, før du vælger, da paginering og uendelig rulning har fordele og ulemper.