Vue infinite无法正确加载数据

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。mafortis正在寻找规范答案。

我正在尝试使用Vue-infinite-loading获取我的数据，但它没有正确返回数据

代码

Component html

<div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1">
.. get name, image, etc.
</div>

<infinite-loading
  slot="append"
  @infinite="infiniteHandler"
  spinner="waveDots"
  @distance="1"
  force-use-infinite-wrapper=".el-table__body-wrapper">
</infinite-loading>

component script

export default {
    props:['currency', 'user'],
    name: "home",
    data() {
        return {
            page: 1,
            showModal: false,
            products: [],
            currentItem: {},
        }
    },
    methods: {
        infiniteHandler($state) {
            console.log('page', this.page);
            axios.get('/api/products?page='+this.page)
            .then(({ data }) => {
                console.log('My page data', data)
                if (data.data.length > 0) {
                    this.page += 1;
                    this.products.push(data.data);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });

            console.log('LOADING')
        },
        setCurrentItem: function(item) {
            this.currentItem = item
        },
    }
}

截图

任何想法导致该问题的原因吗？

更新

Demo

new Vue({
  el: "#app",
  props:['currency', 'user'],
    name: "home",
    data() {
        return {
            page: 1,
            showModal: false,
            products: [
              {
                name: "p1"
              },
              {
                name: "p2"
              },
              {
                name: "p3"
              }
            ],
            currentItem: {},
        }
    },
    methods: {
        infiniteHandler($state) {
            console.log('page', this.page);
            axios.get('http://www.mocky.io/v2/5e4baed83100005700d8b6fe?page='+this.page)
            .then(({ data }) => {
                console.log('My page data', data)
                if (data.data.length > 0) {
                    this.page += 1;
                    this.products.push(data.data);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });

            console.log('LOADING')
        },
        setCurrentItem: function(item) {
            this.currentItem = item
        },
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-infinite-loading.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>


<div id="app">
  <div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1">
    {{product.name}}
  </div>

  <infinite-loading slot="append" @infinite="infiniteHandler" spinner="waveDots" @distance="1" force-use-infinite-wrapper=".el-table__body-wrapper">
  </infinite-loading>
</div>

Answer 1

codesandbox DEMO