Vue Firestore тот же предмет повторять при прокрутке

Question

Я использую VueJS 2 и Firestore для этого проекта.

У меня есть бесконечный метод загрузки, при котором мне нужно загрузить следующий элемент, когда пользователь нажимает на прокрутку внизу страницы.

Все в том же методе, который называется getStraps ()

Идея состоит в том, чтобы first набор элементов для загрузки, и когда пользовательнажимает низ , затем он должен загрузить следующую партию предметов.

Основная проблема: Первые два элемента загружаются как обычно, а затем еще один загружается.Но потом, когда я прокручиваю в другой раз, 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;
          }
        });
      }
    };
  });
},