0

Всё строиться, но не работает пагинация

<div id="app" class="container">
                <ul class="list-group">
                  <li v-for="item in collection" class="list-group-item">
                    {{ item }}
                  </li>
                </ul>
                <hr>
                <div class="btn-toolbar">
                  <div class="btn-group">
                    <button v-for="page in pagination.pages" class="btn btn-primary" @click.prevent="setPage(page)">
                      {{ page }}
                    </button>
                  </div>
                </div>
                Displaying from indexes {{ pagination.startIndex }} to {{ pagination.endIndex }}
              </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script><script src="js/script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
<script>
   new Vue({
  el: '#app',
  data: {
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
    perPage: 3,
    pagination: {}
  },
  computed: {
    collection() {
      return this.paginate(this.data);
    }
  },
  methods: {
    setPage(page) {
      this.pagination = this.paginator(this.data.length, page);
    },
    paginate(data) {
      return _.slice(data, this.pagination.startIndex, this.pagination.endIndex + 1)
    },
    paginator(totalItems, currentPage) {
      let startIndex = (currentPage - 1) * this.perPage;
      let endIndex = Math.min(startIndex + this.perPage - 1, totalItems - 1);
      
      return {
        currentPage,
        startIndex,
        endIndex,
        pages: _.range(1, Math.ceil(totalItems / this.perPage) + 1)
      };
    }
  },
  created() {
    this.setPage(1);
  }
});
</script>

2
  • 1
    У меня работает по вашему примеру. 12 апр 2019 в 14:49
  • Можете подсказать как добавить вместо 0.1.2.3.4.5... Блоки с информацией ? 12 апр 2019 в 15:27

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.