[vue.js] b-table pagination v-for과 함께 사용하기

v-for 을 쓰지 않은 pagination 처리는 뷰 부트스트랩 공식홈페이지에서도 나와있다.

https://bootstrap-vue.org/docs/components/pagination#pagination

BootstrapVue

 

 

하지만

v-for를 사용해서 pagination처리를 해주고 싶을 때,

아래와 같이 해주면 된다.

 

루프를 돌릴 때 미리 computed를 통해 perPage 만큼씩 나눠주면 된다.

<template>
  <div  v-for="list in lists" :key="list.id">
    {{ list.name }}
  </div>
  <b-pagination
     :total-rows="totalRows" 
     v-model="currentPage"
     :per-page="perPage"
  />
</template>
<script>
export default {
  data () {
    return { 
      currentPage: 1,
      perPage: 5,
    }
  },
  computed: {
    lists () {
      const items = this.$store.getters.loadedLists
      // Return just page of items needed
      return items.slice(
        (this.currentPage - 1) * this.perPage,
        this.currentPage * this.perPage
      )
    },
    totalRows () {
      return this.$store.getters.loadedLists.length
    }
  }
}
</script>

 

 

참고

: https://github.com/bootstrap-vue/bootstrap-vue/issues/2133

Fixed : b-pagination not working with v-for, only works with b-table · Issue #2133 · bootstrap-vue/bootstrap-vue