Vue бесконечно неправильно загружает данные

Question

Я пытаюсь получить мои данные с Vue -инфинитной загрузкой , но все же возвращает данные правильно

Код

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
        },
    }
}

Снимок экрана

Есть идеи, что является причиной этой проблемы?

Обновление

Демо

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/vue-infinite-loading@2.4.4/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

codeandbox DEMO

Ваш код в порядке, но с двумя примечаниями. Во-первых, вы должны использовать https вместо http, чтобы избежать заблокированного " смешанного содержимого " и правильно загружать данные из mocky.io . Во-вторых, вам нужно использовать this.products.push(...data.data); вместо this.products.push(data.data);, потому что в этом случае products будет массивом массивов, а не массивом объектов (это то, что вы ожидаете).

<template>
  <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>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      page: 1,
      products: [],
      currentItem: {}
    };
  },
  methods: {
    infiniteHandler($state) {
      console.log(this.products);
      console.log("page", this.page);
      axios
        .get(
          "https://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");
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>