[Vuejs]-Vue js seems to break bootstrap pagination

by

0👍

The reason your pagination is looking all wrong is because you’re placing the v-for on your a tag in side the li.

You need to instead place it on the li as each li represents a page button

In the snippet I’ve replaced your v-if on the next button as it might be confusing to have the buttton disappear.
Instead I’ve used a conditional class.

As an alternative you could utilizebootstrap-vue’s pagination which might save your some trouble of writing the logic yourself.

new Vue({
  el: '#app',
  data() {
    return {
      page: 1,
      pages: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  }
})
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div id="app">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item" :class="{ 'disabled': page == pages[0] }">
          <a class="page-link" href="#" @click="page--">
            Previous
          </a>
        </li>
      <li class="page-item" 
          :class="{ 'active': page === pageNumber }" 
          v-for="pageNumber in pages.slice(page-1, page+4)">
        <a class="page-link" href="#" @click="page = pageNumber">
          {{ pageNumber }}
        </a>
      </li>
      <li class="page-item" :class="{ 'disabled': page >= pages.length }">
        <a class="page-link" href="#" @click="page++">
          Next
        </a>
      </li>
    </ul>
  </nav>
</div>

Leave a comment