Solo necesito orientación sobre cómo configurar la paginación de vuetify. Tengo un componente de tarjeta que recorro, pero también quiero agregar paginación a su alrededor. ¿Solo un punto sobre por dónde empezar sería apreciado?
<v-pagination v-model="pageNo" :length="4" prev-icon="mdi-menu-left" next-icon="mdi-menu-right" />Bucle a través de tarjetas:
<v-col v-for="asset in assets" :key="asset._id" cols="4" > <AssetCard :asset="asset" @send-asset-to-screen="sendAssetToScreen" /> </v-col>Datos:
data () { return { pageNo: 1, selectedAsset: ['all'], assetList: [], searchQuery: '' } }Deberá implementar la funcionalidad de paginación usted mismo, el componente de paginación vuetify no proporciona eso. Solo será un componente visual y le proporcionará el número de página seleccionado.
Para manejar la paginación, puede crear una propiedad calculada que devuelva solo los elementos apropiados de su colección de assets según la propiedad pageNo (que se completará con el componente de paginación)
Código de ejemplo:
<template> <div> <ul> <li v-for="(item, index) in pagedAssets" :key="`asset_index_${index}`"> {{ item }} </li> </ul> <v-pagination v-model="pageNo" :length="numPages"></v-pagination> </div> </template> <script> export default { data: () => ({ pageNo: 1, pageSize: 3, assets: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'] }), computed: { numPages() { // calculate the number of pages we have return Math.ceil(this.assets.length / this.pageSize); }, pagedAssets() { // get the start index for your paged result set. // The page number starts at 1 so the active item in the pagination is displayed properly. // However for our calculation the page number must start at (n-1) const startIndex = (this.pageNo - 1) * this.pageSize; // create a copy of your assets list so we don't modify the original data set const data = [...this.assets]; // only return the data for the current page using splice return data.splice(startIndex, this.pageSize); } } }; </script>