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

[Codefa]

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]

Whenever you use v-for, make sure you set a unique key attribute.

See https://vuejs.org/v2/guide/list.html#key

[Codefa]

@tmorehouse yeah i did it here is my code
but pagination not working any help , my data comes from vuex store

<div  v-for="list in lists" :key="list.id">
{{ list.name }}
</div>

<b-pagination
   :total-rows="totalRows" 
   v-model="currentPage"
   :per-page="5"
/>

data () {
   return {
     currentPage: 1
   }
 },
 computed: {
   lists () {
     return this.$store.getters.loadedLists
   },
   totalRows () {
     return this.$store.getters.loadedLists.length
   }
 }

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

[tmorehouse]

If you are using vue-router, then for your linkGen function, you could return:

  return { path: '#page=' + pageNum }

Which is a router route object

Or set user-router on the b-pagination-nav component, to make the generated links use a <router-link> instead of a normal <a> tag.