vue-infinite-loading的Javascript数组问题答案

【问题标题】：Javascript array issue with vue-infinite-loadingvue-infinite-loading的Javascript数组问题
【发布时间】：2019-05-28 14:11:26
【问题描述】：

我正在尝试使用 vue-InfiniteLoading 组件实现无限加载。每次滚动时我都会得到一个数组，并且在获取数据时尝试将内容从数组推送到另一个数组。当我使用推送时，我在屏幕上看到新元素，但没有图像和信息..

我尝试了 push、concat 和 foreach，但它们都不适合我。 response.data.data.data 是包含新元素的数组，dorms 是 UI 上显示的主数组。

我也试过 push (...response.data.data.data)

    .get(`/site/cities/dorms/istanbul?page=${self.page}`)
    .then(response => {
      if (response.data.data.data) {
        this.page += 1;
        // var myArray = self.dorms;
        // self.dorms = myArray .concat(response.data.data.data);
        // self.dorms.push(response.data.data.data[1]);
        /*             response.data.data.data.forEach(item => {
          self.dorms.push(item);
        }); */
        self.dorms.push(...response.data.data.data);

        //self.dorms = response.data.data.data;
        self.popupDorms = response.data.data.popups;
        $state.loaded();
      } else {
        $state.complete();
      }
    });

我希望数组中的所有信息都被推送，但它不起作用。

【问题讨论】：

你能显示响应 JSON 吗？它真的嵌套在名为“data”的 3 层深度的键中吗？
在箭头函数中你应该使用this而不是self

标签： javascript arrays vue.js vue-infinite-loading

【解决方案1】：

我们可以编写一个小函数来检查滚动位置并触发 ajax 调用以获取更多数据，或者只是从 JSON 对象中获取下一个数据槽并将其绑定到 HTML。如下：

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
           // ajax call or some other logic to show data here
    }
});

或者你可以使用其中一个可用的插件，我自己使用“Waypoint”来完成同样的事情。

【讨论】：

【解决方案2】：

你可以这样做：

self.dorms = [...self.dorms, ...response.data.data.data]

或

self.dorms = [].concat(self.dorms, response.data.data.data)

或

self.dorms.push(...response.data.data.data)

所有结果都相同。您的错误应该在其他地方。

【讨论】：