Vue分頁僅在單擊vuejs-paginate中的下一頁后才有效

Question

我是一個 Vue 初學者，很抱歉這個愚蠢的問題。 我想在我的應用程序中對結果進行分頁，為此我正在使用vuejs-paginate 。 我不太清楚為什么，但是當從后端傳遞結果時，結果列表是空的，但是當我單擊下一步時，一切都突然出現了。

這是我的代碼：

<template>
  <div v-if="!inProgress && loadId" class="row">
    <table class="table table-products">
      <thead>
        <tr>
          <th scope="col">Style number</th>
          <th scope="col">Sync message</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in fetchedSyncResultToShow" :key="product.id">
          <td class="text-bold">
            {{ product.product_code }}
          </td>
          <td class="text-bold">
            {{ product.message }}
          </td>
        </tr>
      </tbody>
    </table>
    <paginate
    :page-count="pageCount"
    :click-handler="pageChanged"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'"
    >
  </paginate>
  </div>
</template>

<script>

import Paginate from 'vuejs-paginate'

export default {
  name: 'BackboneSyncProducts',
  data() {
    return {
      fetchedProductSyncResult: [],
      fetchedSyncResultToShow: [],
      perPage: 10,
      currentPage: 1,
      loadId: null,
      inProgress: false,
    }
  },
  components: {
    Paginate
  },
  computed: {
    pageCount () {
      return Math.ceil(this.fetchedProductSyncResult.length / this.perPage)
    },
  },
  watch: {
    perPage: function (oldArg, newArg) {
      this.pageChanged(this.currentPage)
    }
  },
  methods: {
    pageChanged(pageNumber) {
      let firstElem = Math.max((pageNumber - 1) * this.perPage, 0)
      let lastElem = Math.max(pageNumber * this.perPage, this.perPage)
      this.fetchedSyncResultToShow = this.fetchedProductSyncResult.slice(firstElem, lastElem)
      console.log('fetchedSyncResultToShow', this.fetchedSyncResultToShow)
    }
  }
}
</script>

我認為最后一部分很關鍵

this.fetchedSyncResultToShow = this.fetchedProductSyncResult.slice(firstElem, lastElem)
console.log('fetchedSyncResultToShow', this.fetchedSyncResultToShow)

Console.log 僅在單擊Next后顯示任何結果，在此之前不記錄任何操作。 如何在不單擊Next的情況下立即顯示結果？

[編輯] 這是填充fetchedProductSyncResult的地方。

watch: {
  loadId(newValue, oldValue) {
    if (!oldValue && newValue) {
      const intervalId = setInterval(() => {
        this.inProgress = true
        fetchSyncedProductsResultRequest(this, newValue).then(response => {
          if (response.data['products_batch']['result']) {
            clearInterval(intervalId);
            this.fetchedProductSyncResult = response.data['products_batch']['result']
            this.inProgress = false
          }
        })
      }, 1000)
    }
  },
  perPage: function (oldArg, newArg) {
    this.pageChanged(this.currentPage)
  }
},

Answer 1

首先填充 fetchedProductSyncResult 的部分在哪里？ 如果您在 fetchedProductSyncResult 尚未獲取時嘗試對其進行操作，這可能是一個瓶頸。