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 中的数据更新,但未在屏幕上自动显示计数器更新