I just need some guidance on how to configure vuetify pagination. I have a card component which I loop through but also want to add pagination around it. Just a point on where to start would be appreciated?
<v-pagination
v-model="pageNo"
:length="4"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
/>
Loop through cards:
<v-col
v-for="asset in assets"
:key="asset._id"
cols="4"
>
<AssetCard
:asset="asset"
@send-asset-to-screen="sendAssetToScreen"
/>
</v-col>
Data:
data () {
return {
pageNo: 1,
selectedAsset: ['all'],
assetList: [],
searchQuery: ''
}
}
You will need to implement the pagination functionality yourself, the vuetify pagination component does not provide that. It will only be a visual component and provide the selected page number for you.
To handle the pagination you could create a computed property which returns only the appropriate items from your assets collection based on the pageNo property (which will be populated by the pagination component)
Example code:
<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>