如何在列表上设置 Vuetify 分页答案

【问题标题】：How to set Vuetify pagination on list如何在列表上设置 Vuetify 分页
【发布时间】：2019-10-17 16:03:21
【问题描述】：

使用 vuetify，我试图在 <v-list-item> 上设置 <v-pagination>，但我看不到如何将我的项目（通知中的 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>

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案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 传递给您的项目列表。

【讨论】：