分页将值重置为 1 bootstrap-vue答案

【问题标题】：Pagination reset value to 1 bootstrap-vue分页将值重置为 1 bootstrap-vue
【发布时间】：2021-08-29 23:55:13
【问题描述】：

我通过使用 axios 在表中显示 API 命中的数据，制作了一个用于错误跟踪的仪表板。不幸的是，有一个错误，当我进一步导航时，分页页面值总是重置为 1

如您所见，REQUESTID 列中的第一个数据以 H764 开头，当我单击 > 按钮时，它变成了这样

它显示了已命中的 API 数据的第二页，但它保持分页值精确为 1，在 REQUESTID 列中以 U707 开头的不同数据。

<script>
// eslint-disable-next-line no-unused-vars
import { getAllProvinces } from '~/api/delivery'
export default {
  data() {
    return {
      filter: null,
      filterOn: [],
      perPage: 0,
      currentPage: 1,
      rows: 0,
      items: [],
      fields: [
        {
          key: 'id',
          sortable: true,
          label: 'ID',
          class: 'truncate',
        },
        {
          key: 'uploadReference',
          sortable: true,
          label: 'Upload Reference',
          class: 'truncate',
        },
        {
          key: 'requestId',
          sortable: true,
          label: 'Request ID',
          class: 'truncate',
        },
        {
          key: 'storeCode',
          sortable: true,
          label: 'Store Code',
          class: 'truncate',
        },
        {
          key: 'branchCode',
          sortable: true,
          label: 'Branch Code',
          class: 'truncate',
        },
        {
          key: 'b2bId',
          sortable: true,
          label: 'B2B ID',
          class: 'truncate',
        },
        {
          key: 'request',
          sortable: true,
          label: 'Request',
          class: 'truncate',
        },
        {
          key: 'response',
          sortable: true,
          label: 'Response',
          class: 'truncate',
        },
        {
          key: 'createDate',
          sortable: true,
          label: 'Create Date',
          class: 'truncate',
        },
        {
          key: 'errorClassification',
          sortable: true,
          label: 'Error Classification',
          class: 'truncate',
        },
      ],
    }
  },
  watch: {
    currentPage: {
      handler(value) {
        this.getAllStock()
      },
    },
  },
  created() {
    this.getAllStock()
  },
  methods: {
    getAllStock() {
      this.$axios
        .get(
          'axioslink?requestPage=' +
            this.currentPage +
            '&status=1'
        )
        .then((res) => {
          // eslint-disable-next-line no-console
          console.log(res.data)
          this.items = res.data.stocks
          this.allStock = res.data
          this.rows = res.data.totalDocuments
          // eslint-disable-next-line no-console
        })
      this.rows = this.items.length 
       //this is used to show remaining data in table, since it only wants to display 10 data per page
    },
    onFiltered(filteredItems) {
      this.rows = filteredItems.length
      this.currentPage = 1
    },
  },
}
</script>

        <b-card body>
          <b-card-header class="border-0">
            <h3 class="mb-0">Stock List</h3>
          </b-card-header>
          <template>
            <p class="mt-3">Current Page: {{ currentPage }}</p>
            <div class="text-center">
              <b-table
                id="my-table"
                :per-page="perPage"
                :current-page="currentPage"
                striped
                small
                hover
                dark
                responsive
                show-empty
                :items="items"
                :fields="fields"
                :filter="filter"
                :filter-included-fields="filterOn"
                @filtered="onFiltered"
              >
                <template v-slot:cell()="data">
                  <span v-b-tooltip.hover :title="data.value">{{
                    data.value
                  }}</span>
                </template>
              </b-table>
            </div>
          </template>
          <div class="overflow-auto">
            <b-card-footer class="py-4 d-flex justify-content-end">
              <b-pagination
                v-model="currentPage"
                :total-rows="rows"
                :per-page="perPage"
                aria-controls="my-table"
              ></b-pagination>
            </b-card-footer>
          </div>
        </b-card>

【问题讨论】：

标签： javascript vue.js axios nuxt.js bootstrap-vue

【解决方案1】：

您的perPage 为 0，因此页码始终为 1。

export default {
  data() {
    return {
      filter: null,
      filterOn: [],
      perPage: 0, // Bug here
      currentPage: 1,
      ...
    }
  }
}

【讨论】：

无论我将 perPage 设置为 0 还是 10，它仍然具有相同的输出

【解决方案2】：

我准备了一个代码 sn-p 来重现您的问题。请看看这个sn-p，看看它是否能解决你的问题。

我更改了perPage 的值并删除了axios 用于测试并使用setTimeout 模拟axios 行为。

new Vue({
  el: '#app',
  data() {
    return {
      filter: null,
      filterOn: [],
      perPage: 2,
      currentPage: 1,
      rows: 0,
      items: [],
      fields: [{
          key: 'id',
          sortable: true,
          label: 'ID',
          class: 'truncate',
        },
        {
          key: 'uploadReference',
          sortable: true,
          label: 'Upload Reference',
          class: 'truncate',
        },
      ],
    }
  },
  watch: {
    currentPage: {
      handler(value) {
        this.getAllStock()
      },
    },
  },
  created() {
    this.getAllStock()
  },
  methods: {
    getAllStock() {
      setTimeout(() => {
        this.items = [{
            id: 1,
            uploadReference: "TEXT"
          },
          {
            id: 2,
            uploadReference: "TEXT"
          },
          {
            id: 3,
            uploadReference: "TEXT"
          },
          {
            id: 4,
            uploadReference: "TEXT"
          },
          {
            id: 5,
            uploadReference: "TEXT"
          },
          {
            id: 6,
            uploadReference: "TEXT"
          }
        ]
        this.rows = this.items.length
      }, 1000)
    },
    onFiltered(filteredItems) {
      this.rows = filteredItems.length
      this.currentPage = 1
    },
  },
})

#app {
  padding: 20px;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-card body>
    <b-card-header class="border-0">
      <h3 class="mb-0">Stock List</h3>
    </b-card-header>
    <template>
            <p class="mt-3">Current Page: {{ currentPage }}</p>
            <div class="text-center">
              <b-table
                id="my-table"
                :per-page="perPage"
                :current-page="currentPage"
                striped
                small
                hover
                dark
                responsive
                show-empty
                :items="items"
                :fields="fields"
                :filter="filter"
                :filter-included-fields="filterOn"
                @filtered="onFiltered"
              >
                <template v-slot:cell()="data">
                  <span v-b-tooltip.hover :title="data.value">{{
                    data.value
                  }}</span>
                </template>
    </b-table>
</div>
</template>
<div class="overflow-auto">
  <b-card-footer class="py-4 d-flex justify-content-end">
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
  </b-card-footer>
</div>
</b-card>
</div>

【讨论】：