If you want to incorporate pagination functionality, you'll have to do it yourself as the vuetify pagination component doesn't handle that task. It serves as a visual element and supplies the chosen page number.
To manage pagination, consider creating a computed property that filters your assets array based on the pageNo value (provided by the pagination component).
Here's an example of how this can be accomplished:
<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 total number of pages
return Math.ceil(this.assets.length / this.pageSize);
},
pagedAssets() {
// Determine the starting index for each page.
// Adjust the page number (-1 necessary for correct display).
const startIndex = (this.pageNo - 1) * this.pageSize;
// Create a copy of the assets array to avoid changing the original dataset
const data = [...this.assets];
// Return only the items relevant to the current page using splice
return data.splice(startIndex, this.pageSize);
}
}
};
</script>