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

Posted

技术标签:

【中文标题】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>```

【讨论】:

以上是关于Bootstrap-Vue 分页未在屏幕上显示更新的切片数组内容的主要内容,如果未能解决你的问题,请参考以下文章

Flutter Firebase:Firebase 中的数据更新,但未在屏幕上自动显示计数器更新

Vuetify 数据表分组与分页未按预期工作

KnockoutJS observable 未在屏幕上更新

分页将值重置为 1 bootstrap-vue

Bootstrap-vue 分页导航不像教程中那样工作(单击页面时刷新)

如何防止 Bootstrap-Vue 分页自动重置