Firestore无限加载Vue

Question

更新 为“ lastVisible”添加了数据绑定，使其更具动态性

问题 当我滚动到底部时，我加载了2个相同的产品，然后继续滚动时，我获得了相同的产品，但是只有一个一次。就像它不会更新“ lastVisible”绑定。 视频：http://recordit.co/z0LtPReQ8Q

我正在尝试合并无限加载，当用户滚动到窗口底部时，将加载更多产品。

import db from "../firebase/firebaseInit";
import firebase from "firebase";

export default {
  data() {
    return {
      lastVisible: [],
      straps: []
    }
  },
  created() {
    this.getStraps()
  },
  methods: {
    getStraps() {
      var first = db.collection("straps").limit(2);
      first.get().then(documentSnapshots => {
        this.lastVisible =
          documentSnapshots.docs[documentSnapshots.docs.length - 1];
        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);
          console.log("first data", data);
          console.log("visible", this.lastVisible);
        });
        this.straps = straps;
        var next = db
          .collection("straps")
          .startAfter(this.lastVisible)
          .limit(1);

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

          if (bottomOfWindow) {
            next.get().then(documentSnapshots => {
            this.lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
              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)
                };
                console.log("lastVisible", this.lastVisible);
                console.log("more data", data);
                this.straps.push(data);
              });
            });
          }
        };
      });
      console.log("window", bottomOfWindow);
    }
  },
  computed: {
    filteredStraps() {
      var straps = this.straps;

      if (this.search !== null) {
        var straps = this.searchItems.filter(strap => {
          if (!this.search) return this.searchItems;
          return (
            strap.desc.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.title.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.skin.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.type.toLowerCase().includes(this.search.toLowerCase()) ||
            strap.colors.find(color => {
              return this.search
                .toLowerCase()
                .includes(color.title.toLowerCase());
            })
          );
        });
      }

      if (this.slider) {}

      if (this.checkedSkins.length > 0) {
        straps = straps.filter(strap => {
          return this.checkedSkins.includes(strap.skin.toLowerCase());
        });
      }
      if (this.checkedTypes.length > 0) {
        straps = straps.filter(strap => {
          return this.checkedTypes.includes(strap.type.toLowerCase());
        });
      }
      if (this.checkedColors.length > 0) {
        straps = straps.filter(strap => {
          return strap.colors.find(color => {
            return this.checkedColors.includes(color.title.toLowerCase());
          });
        });
      }

      if (this.sort == "newest") {
        return straps.sort((a, b) => new Date(a.date) - new Date(b.date));
      }
      if (this.sort == "priceasc") {
        return straps.sort((a, b) => a.price > b.price);
      }
      if (this.sort == "pricedesc") {
        return straps.sort((a, b) => a.price < b.price);
      } else {
        return straps;
      }
    }
  },

<v-layout justify-start wrap>
  <v-flex xs12 pa-3 sm4 lg2 v-for="strap in filteredStraps" :key="strap.id">
    <v-hover>
      <v-card :to="{name: 'Strap', params: {id: strap.id}}" flat slot-scope="{ hover }">
        <v-img :src="strap.imgs" aspect-ratio="1">
          <v-layout class="grey lighten-1" slot="placeholder" fill-height align-center justify-center ma-0>
            <v-progress-circular indeterminate color="grey darken-1"></v-progress-circular>
          </v-layout>
        </v-img>
        <v-card-title primary-title>
          <h3 class="text-xs-left">{{strap.title | capitalize}}</h3>
        </v-card-title>
        <v-card-text style="padding: 0 !important;">
          <p class="text-xs-left">{{strap.price}} kr.</p>
        </v-card-text>
      </v-card>
    </v-hover>
  </v-flex>
</v-layout>

除了滑块之外，计算的属性都有效，但这不是问题的重点。我正在getStraps（）中寻找无限加载方法的答案，以便在用户滚动到窗口底部时加载更多产品。