Bootstrap-Vue pagination not displaying the updated sliced array content on screen

Question

Im using bootstrap vue's pagination component to break up and display content from a v-for loop. I am slicing the array perPage. Everything seems to be working. the correct number of perPage is displayed. The correct number of rows. The only problem is that when I select a new page, the content is never updated on the screen. It shows the same data on every page.

I have console logged the sliced array depending on what page and the slice is happening and working on everyPage click, I just cant get that new array to display on screen.

<b-paggination v-model="currentPage" :total-rows="rows" :per- 
page="perPage" aria-controls="my-table" </b-pagination>

<b-col v-if="!showLoad" class="mb-4" v-for="(data,index) in 
listOfData" id="my-table" :key="index" cols="12>
<app-card v-bind:data="Data[index]></app-card>
</b-col>



computed: {
rows() {
return this.data.length;
}

listOfData() {
const items = this.Data

return items.slice((this.currentPage - 1) * this.perPage, 
this.currentPage * this.perPage);
    }
 }

David13 David13 · Accepted Answer · 2019-08-06T16:34:42

Update: I discovered that injecting the content from the v-for into the imported card component (app-card) was somehow stoping the content from updating from page to page. I just removed the app-card component and hard coded a card in its place.. Now for some reason the content is changing from page to page.

```
 //This Works:
 <div v-for="(data, index) in listOfData" :key="index">
 <b-card
    overlay
    img-src="https://picsum.photos/900/250/?image=3"
    img-alt="Card Image"
    text-variant="white"
    title="Image Overlay"
    sub-title="Subtitle"
  >
    <b-card-text>
      {{ data.Data }}
    </b-card-text>
  </b-card>
</div>


//This Doesnt Work:
<div v-for="(data, index) in listOfData" :key="index">
<app-card v-bind:Dataprop="Data"></app-card>
</div>```

Bootstrap-Vue pagination not displaying the updated sliced array content on screen

1 Answers