Bootstrap-Vue 分页未在屏幕上显示更新的切片数组内容

Posted 2023-02-22

【中文标题】Bootstrap-Vue 分页未在屏幕上显示更新的切片数组内容

【英文标题】：Bootstrap-Vue pagination not displaying the updated sliced array content on screen

【发布时间】：2019-12-14 03:27:29

【问题描述】：

我正在使用引导 vue 的分页组件来分解和显示来自 v-for 循环的内容。我正在对每个页面的数组进行切片。一切似乎都在工作。显示正确的每页数。正确的行数。唯一的问题是当我选择一个新页面时，屏幕上的内容永远不会更新。它在每个页面上显示相同的数据。

我已经控制台记录了切片数组，具体取决于哪个页面和切片正在发生并在每次点击页面时工作，我只是无法让新数组显示在屏幕上。

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

【参考方案1】：

更新：我发现将 v-for 中的内容注入到导入的卡片组件 (app-card) 会以某种方式阻止内容在页面之间更新。我刚刚删除了 app-card 组件并在其位置硬编码了一张卡片。现在由于某种原因，内容正在从一个页面更改为另一个页面。

```
 //This Works:
 <div v-for="(data, index) in listOfData" :key="index">
 <b-card
    overlay
    img-src="https://picsum.photos/900/250/?image=3"
    img-
    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>```