TypeError：在vue中传播不可迭代实例的无效尝试

Question

我使用Vue-infinite-loading 用laravel创建无限分页。这是我的组件代码：

<template>
    <div class="card" v-for="(i, $index) in items" :key="$index">
      ...
    </div>
    <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';
const api = './api';
export default {
    components: { InfiniteLoading },
    data: () => ({
        keywords: null,
        items: [],
        page: 1,
        per_page: 10,
        last_page: null,
    }),
    methods: {
        infiniteHandler($state) {
          axios.get(api, {
            params: {
              page: this.page,
            },
          }).then(response => {
            this.last_page = response.data.last_page;
            if (this.last_page != this.page) {
              this.page = this.page + 1;
              this.items.push(...response.data.data);
              $state.loaded();
            } else {
              $state.complete();
            }
            })
        },
    }
    };
</script>

这在第1页中可以正常使用，但是当我滚动到页面底部时，出现此错误：

Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread
    at _toConsumableArray