Vue Firestore相同项目不断滚动

Question

我正在为此项目使用VueJS 2和Firestore。

我有一个无限的加载方法，当用户在滚动条上点击页面底部时，我需要加载下一个项目。

所有内容都在名为getStraps（）的相同方法中

想法是先加载一组 项，然后当用户点击 底部 ，则应加载 next 一批项目。

主要问题： ：前两个项目照常加载，然后另一个加载。但是，当我再次滚动时，第4个项目重复与第3个相同，依此类推。变量“ lastVisible”似乎没有更新，因此不会通过“ startAfter”加载以下项目 视频：http://recordit.co/TwqEb4SeWe

getStraps() {
  var strapper = db.collection("straps");
  var first = strapper.limit(2);

  return first.get().then(documentSnapshots => {
    var lastVisible =
      documentSnapshots.docs[documentSnapshots.docs.length - 1];
    console.log("first last visible", lastVisible);
    const straps = [];
    documentSnapshots.forEach(doc => {
      const data = {
        id: doc.id,
        title: doc.data().title,
        price: doc.data().price,
        skin: doc.data().skin,
        type: doc.data().type,
        imgs: doc.data().imgs[0].url,
        colors: doc.data().colors,
        desc: doc.data().desc,
        date: doc
          .data()
          .date.toString()
          .slice(0, 15)
      };
      straps.push(data);
    });
    this.straps = straps;

    var next = strapper.startAfter(lastVisible).limit(1);

    window.onscroll = () => {
      let bottomOfWindow =
        document.documentElement.scrollTop + window.innerHeight ===
        document.documentElement.offsetHeight;

      if (bottomOfWindow) {
        this.fetchingData = true;
        console.log("fetch", this.fetchingData);

        return next.get().then(documentSnapshots => {
          var lastVisible =
            documentSnapshots.docs[documentSnapshots.docs.length - 1];
          console.log("last last", lastVisible);

          if (documentSnapshots.empty) {
            this.fetchingData = false;
            this.noMoreStraps = true;
          } else {
            documentSnapshots.forEach(doc => {
              const straps = this.straps;
              const data = {
                id: doc.id,
                title: doc.data().title,
                price: doc.data().price,
                skin: doc.data().skin,
                type: doc.data().type,
                imgs: doc.data().imgs[0].url,
                colors: doc.data().colors,
                desc: doc.data().desc,
                date: doc
                  .data()
                  .date.toString()
                  .slice(0, 15)
              };
              console.log("more data", data);
              straps.push(data);
              this.fetchingData = false;
            });
            this.straps = straps;
          }
        });
      }
    };
  });
},