如何在列表上设置 Vuetify 分页

Question

使用 vuetify，我试图设置<v-pagination>一个，<v-list-item>但我不知道如何将我的项目（通知中的 n）绑定到分页。它需要额外的功能吗？我发现的大部分文档都与 vuetify 表有关。

<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>

如何设置按页面显示的项目数？

Answer 1

您可以使用分页组件的 v-model 来获取要显示的项目列表。

这是一个例子

<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

然后，您可以将 传递visiblePages给您的项目列表。