bootstrap-vue <b-pagination> 组件在点击时不改变页面

Question

我想实现一个分页组件 b-pagination w/bootstrap-vue 但它只会显示第一页。我按照文档中的设置进行操作，但它们仅显示了使用 table 而非无序列表的示例。我有：

<template>
  <div class="results overflow-auto" v-cloak>
    <h3>Search Results</h3>

    <modal v-if="showModal" @close="showModal = false">
      <!--
      you can use custom content here to overwrite
      default content
      -->
      <template v-slot:header>
        <h1>NASA Image</h1>
      </template>

      <template v-slot:body>
        <b-img class="modal-image" v-bind:src="attribute"></b-img>
      </template>
    </modal>

    <!-- ======== Pagination Markup  ============ -->
    <b-pagination
      v-model="currentPage"
      :total-rows="rows"
      :per-page="perPage"
      :items="items"
      aria-controls="my-list"
    ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <!-- ==========End Pagination Markup ======== -->

    <!-- Limit output to 100 items -->

    <ul
      class="search-results"
      id="my-list"

    >
      <li v-for="(item, index) in propsResults.items.slice(0,100)" :key="index">
        {{ item.data[0].title}}
        <span>
          <b-img
            thumbnail
            class="thumbnail"
            :src="item.links[0].href"
            alt="Fluid image"
            id="show-modal"
            v-on:click="imageModal"
          ></b-img>
        </span>
      </li>
    </ul>
  </div>
</template>

我的 javascript 是：

export default {
  name: "SearchResults",
  props: ["propsResults"],
  data() {
    return {
      showModal: false,
      attribute: "",
      perPage: 10,
      currentPage: 1,
      items: this.$props.propsResults.items
    };
  },
  computed: {
    rows() {
      return this.$props.propsResults.items.length;
    }
  }

分页组件在一页上显示项目数组的所有 100 个项目。我还应该注意，我没有在 FF 中的每个 Vue 开发工具的 b-pagination 道具对象中看到项目数组。这是正常的吗？任何见解表示赞赏..

Answer 1

您应该仍然使用 currentPage 来选择要显示的项目。 b-pagination 组件只会更改该数字。

尝试使用这一行：

<li v-for="(item, index) in items.slice(10*(currentPage-1),10*(currentPage))" :key="index">

bootstrap-vue <b-pagination> 组件在点击时不改变页面

bootstrap-vue <b-pagination> component not changing pages on click

vue.js

bootstrap-vue