Question

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

我让控制台根据切片页面记录切片的数组，切片正在发生并在每次单击页面时起作用，我只是无法让新数组显示在屏幕上。

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

Answer 1

更新：我发现将v-for中的内容注入到导入的卡组件（app卡）中，以某种方式阻止了内容在页面之间的更新。我只是删除了应用卡组件，并在其位置上对卡进行了硬编码。。由于某种原因，内容在页面之间不断变化。

```
 //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分页未在屏幕上显示更新的切片数组内容

1 个答案: