Vue.js vue观察可见性-一次对每个页面进行api调用

我正在使用vue并已安装npm软件包

vue观察可见性

。我目前已将

v-observe-visibility=“visibilityChanged”

放在选择列表中

在

visibilityChanged

方法中，我有以下内容

visibilityChanged (isVisible) {
      if (!isVisible) {return}
      this.isVisible = isVisible
      this.page++;

      this.$emit('getMoreData', this.page)
    },

因此，页面递增并发出一个事件，该事件调用

getMoreData（）

方法，并以每页15的增量返回分页数据

方法

getMoreData (page) {
      if(page > this.lastPage) {return}
      axios.get(`${this.userDataUrl}?page=${page}`).then(response => {
        this.items.push(...response.data.data);
        this.lastPage = response.data.last_page;
      });
    },

HTML

//使“选择”具有可滚动功能

问题是，我一打开下拉列表，就会为每个页面调用getMoreData方法，因此它会在打开选择列表后导致刷新。我在我的网络选项卡中看到，它立即呼叫

？page=2,3,4

等。。。当我向下滚动到下一页时，我如何使这只调用下一页

  <div>
    <select onfocus='this.size=10;' onblur='this.size=1;' onchange='this.size=1; this.blur();'> //to make select have scrollable feature
      <option
          v-if="items.length" v-observe-visibility="visibilityChanged"
          v-for="item in items"
          value="item.id"
          :key="item.id"
      >
        <slot name="item" v-bind:item="item" />
      </option>
    </select>
  </div>