Как сделать не-табличную нумерацию страниц с Buefy

Question

Я хочу сделать нумерацию страниц для своего проекта, в настоящее время использую 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>

Answer 2

Сделайте фильтр, который отображает ваш первый 5. Когда вы нажимаете номер страницы или следующей страницы и получаете переменную с этим значением. Ваш фильтр должен будет прочитать эту переменную и дать вам правильное число или объекты.

Пример: Страница 1 -> от 1 до 5 Страница 2 -> от 6 до 10 (2 = +5, 3= +10)

Ваш фильтр обновит и покажет новые