Vue-到达页面底部时，无限滚动不会获取新数据

Question

So, I made a method fetchStories that fetches stories from my API in batches of 10, and the new stories can be fetched once you've scrolled to the bottom of the screen. This is what part of my Vue instance looks like:

var discoveryFeed = new Vue({ // eslint-disable-line no-unused-vars
  el: '#discoveryFeed',
  data: {
    userId: userId,
    username: username,
    tags: [],
    selectedTag: null,
    stories: [],
    checklist: [],
    limit: 10,
    page: 1,
    isEnd: false,
    busy: false,
    isFollowing: true
  },
  beforeMount: function() {
    var self = this;
    self.$http.get('/api/tags')
      .then(function(res) {
        self.tags = res.body;
      }, function(err) {
        self.tags = [];
      });
    self.$http.get('/api/user/' + self.username + '/checklist')
      .then(function(res) {
        self.checklist = res.body || [];
      }, function(err) {
        self.checklist = [];
      });
    self.fetchStories();
  },
  methods: {
    fetchStories: function(isNew) {
      var self = this;
      isNew = Boolean(isNew);
      if(self.isEnd) { return; }

      self.busy = true;
      var url = '/api/discover';
      if(self.selectedTag) {
        url = `/api/tags/${self.selectedTag.code}/stories`;
      }
      url += '?p=' + self.page;
      url += '&l=' + self.limit;
      self.page += 1;
      self.$http.get(url)
        .then(function(res) {
          self.busy = false;
          if(res.body.length === 0) {
            self.isEnd = true;
            return;
          }
          if(isNew) {
            self.stories = [];
          }
          self.stories = self.stories.concat(res.body);
        }, function(err) {
          self.busy = false;
          self.stories = [];
        });
    },
    setTag: function(tag) {
      var self = this;
      self.selectedTag = tag;
      for(var i = 0; i < self.tags.length; i++) {
        self.tags[i].selected = false;
      }
      self.selectedTag.selected = true;
      self.page = 1;
      self.fetchStories(true);
    }

In my pug, I'm using the v-infinite-scroll directive to call the method fetchStories . Also note that I'm working with a list of tags, and clicking a new tag will load different sets of stories through the method setTag(tag) .

nav.col-lg-3.col-md-4.d-none.d-md-block.d-lg-block.bg-sidebar(v-cloak)
  .feed-sidebar.feed-sidebar-interests.border-top-0.border-bottom-0.border-left-0.position-sticky
    strong Your Interests
    div.list-group.list-unstyled.mt-2(v-if="tags.length > 0")
      a.tag-btn.mb-2.align-middle.text-black(v-for="tag, index in tags" v-bind:class="{ active: selectedTag && selectedTag.id === tag.id }" @click="setTag(tag); scrollToTop();")
        i.fa-fw.mr-2(v-bind:class="tag.icon + ' fa-lg'"
          v-bind:style="'color:' + tag.hexColor")
        span {{ tag.name }}

.col-lg-6.col-md-8(v-cloak
    v-infinite-scroll="fetchStories"
    infinite-scroll-disabled="busy"
    infinite-scroll-distance="50")

Upon checking the data response at the initial load, the ten stories are fetched at /stories?p=1&l=10 . However, upon reaching the bottom the data response array of /stories?p=2&l=10 is empty. This may have something to do with my use of booleans to set flags when choosing a tag.

Answer 1

Apparently, I should have reset the value of isEnd when I'm setting the new tag.

setTag: function(tag) {
  var self = this;
  self.selectedTag = tag;
  for(var i = 0; i < self.tags.length; i++) {
    self.tags[i].selected = false;
  }
  self.selectedTag.selected = true;
  self.page = 1;
  self.isEnd = false;
  self.fetchStories(true);
}