How to set Vuetify pagination on list

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.