javascript - VueJS BPagination - 每次更改 currentPage 时都会多次调用我的方法

Question

我有这个：

<template>
 <div class="col-md-12" style="margin-bottom: 10px;">
     <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
      />
 </div>
</template>

<script>
  data : function () {
        return {
            images: [],
            isLoadingImage: true,
            loadingText: "Please wait while we're loading the images...",
            searchText : '',
            currentPage: 1,
            totalRows: 16,
            perPage: 50,
        }
  },

  watch : {
     currentPage (to, from) {
        this.searchImage();
     },
  },

  mounted() {
      this.searchImage();
  },

  methods : {
     searchImage() {
        let _this = this;
        this.isLoadingImage = true;
        MyCustomService.showImage(this.searchText,this.currentPage).then(function(result){
                _this.isLoadingImage = false;
                _this.images = result.data.results;
                _this.totalRows = result.data.page.totalitems;
                _this.perPage = result.data.page.itemsperpage;
        });
     }
  }
</script>

我注意到，当我点击分页上的数字时，这个：

它调用了searchImage()两次。因此，当我想转到第 2 页时，这使得currentPage= 2，它转到 page2然后它重置回1.

顺便说一句 - 这MyCustomService.showImage()是一个async函数，不确定它是否会给你额外的信息。

这是为什么？我认为我的代码非常简单，但我得到了这个奇怪的结果。

如果您需要进一步澄清，请告诉我，我很乐意添加一些信息。

谢谢，非常感谢您的帮助！

标签： javascriptvue.js