vue-infinite-loading的Javascript数组问题

Question

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

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

我也尝试过推送(...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();
      }
    });

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

Answer 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“来做同样的事情。

Answer 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)

所有的结果都是一样的。你的错误应该出在别的地方。