vue.js - 如何使用 Buefy 实现非表格分页

Question

我想为我的类(class)项目制作分页，目前使用 Vue.js 和 Bulma + Buefy。我有一个对象数组，我想每页显示 5 个。已经完成布局和一切，我只想知道如何使分页工作。抱歉，无法发布代码，因为它在此处显示不正确，但我使用 v-for 来显示每次迭代。非常感谢!

Answer 1

您可以使用 <b-pagination>组件

如果没有您提供的任何代码示例，这将是使用该组件的最小方法

const example = {
    data() {
        return {
            items: [],
            current: 1,
            perPage: 5,
        }
    },
    created() {
      // populate array
      for(var i = 1; i <= 100; i++){
        this.items.push(i)
      }
    },
    computed: {
      total() {
        return this.items.length
      },
      /*
        Filtered items that are shown in the table
      */
      paginatedItems() {
        let page_number = this.current-1
 
        return this.items.slice(page_number * this.perPage, (page_number + 1) * this.perPage);
        
      }
    },
    
}

Vue.config.devtools = false
Vue.config.productionTip = false

const app = new Vue(example)

app.$mount('#app')

<link href="https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Buefy CSS -->
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">

<!-- Buefy JavaScript -->
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>

<div id="app" class="container">

  <div v-for="(item, index) in paginatedItems">
    {{ item }}
  </div>

  <b-pagination
    :total="total"
    :current.sync="current"
    :per-page="perPage"
  >
  </b-pagination>

</div>