How to make non table pagination with Buefy
You can use <b-pagination> component
Without any code sample from you, this would be minimal approach to use that component
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 = falseVue.config.productionTip = falseconst 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>
Do a filter with that displays your first 5. When you click in the number of the page or next page and have a var with that value. The your filter will need to read that var and give you the right number or objects.
Example:Page 1 -> 1 to 5Page 2 -> 6 to 10 (2 = +5, 3= +10)
Your filter will update and show the new ones