Fixed : b-pagination not working with v-for, only works with b-table

b-pagination or b-pagination-nav not working with v-for only works with b-table please give a example b-pagination or b-pagination-nav works with <div v-for="item in items>

[tmorehouse]

Ah, the per-page only applies to the pagination component. You need to slice your data when presenting it to your v-for loop (you are currently giving it the entire list)

<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>

[Codefa]

@tmorehouse Thank you very much i just forgot to use some logics and i did it with <b-pagination-nav works fine (actually i want to link routes too ) working code here 👍 for who thinks its hard to implement pagination with router links here perPage = 2 & number-of-pages=5 (number-of-pages is a computed property ) beacuse i have only 10 items and i want to show it 2 / page so 5 * 2 = 10 10 is the total number of items comes from vuex store

<template>
<div id="lists">
  <div  v-for="list in lists" :key="list.id">
    {{ list.name }}
  </div>
</div>
<b-pagination-nav :link-gen="linkGen" :number-of-pages="numPages" v-model="currentPage" />
</template>

<script>
export default {
  data () {
    return { 
      currentPage: 1,
      perPage: 2
    }
  },
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
      )
    },
    numPages () {
      return Math.ceil(this.$store.getters.loadedLists.length / this.perPage)
    }
  },
  methods: {
    linkGen (pageNum) {
      return '#page=' + pageNum
    }
  }
}
</script>