How to set Vuetify pagination on list - vue.js

Question

With vuetify, I am trying to set <v-pagination> on a <v-list-item> but I don't see how to bind my items (n in notification) to the pagination. Does it need an extra function? Most of the documentation I found was with vuetify tables.
<template>
<div>
<v-card
class="mx-auto"
max-width="300"
tile
>
<v-list rounded>
<v-subheader>NOTIFICATIONS</v-subheader>
<v-list-item-group color="primary">
<v-list-item
v-for="(n, i) in notification"
:key="i"
>
<v-list-item-content>
<v-list-item-title v-text="n.payload"></v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-pagination
v-if="pages > 1"
v-model="pagination.page"
:length="pages"
></v-pagination>
</v-list-item-group>
</v-list>
</v-card>
</div>
</template>
<script>
export default {
name: "status",
data() {
return {
pagination: {
page: 1,
total: 0,
perPage: 0,
visible: 3
},
notification: [],
}
},
computed: {
pages () {
Math.ceil(this.notification.length / 3)
}
}
}
</script>
How do I set the number of items displayed by page?

Answer 1

you can use the pagination component's v-model to get a list of items to display.
here's an example
<div id="app">
<v-app id="inspire">
<div class="text-center">
{{ visiblePages }}
<v-pagination
v-model="page"
:length="Math.ceil(pages.length/perPage)"
></v-pagination>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
page: 1,
perPage: 4,
pages: [0,1,2,3,4,5,6,7,8,9,10,11,12,13]
}
},
computed: {
visiblePages () {
return this.pages.slice((this.page - 1)* this.perPage, this.page* this.perPage)
}
}
})
https://codepen.io/scorch/pen/RwwGKrQ
you can then pass the visiblePages to you item list.