如何在 Axios 响应上将 JSON 数组正确推送到 Vue JS 中的现有数据数组中？

Question

我认为这是一个通用的 Javascipt 问题，但是我在 Vue Js、Laravel 和 Axios 工作。

如何将一个 JSON 数组推入另一个 JSON 数组？ 我的问题是，当我将辅助数组推入主数组时，它是嵌套的（见截图）。 我需要它作为同一个数组的一部分。

这是一个简单的索引问题吗？ 我读过concat可以实现这一点，但我有一个“加载更多”按钮并希望附加数组并从底部增加大小，所以push是合适的。 concat 创建一个新数组并替换当前数组，这是不希望的，因为我想维护现有数组并只是增加大小以更平滑地加载结果，例如在 Pinterest 滚动和底部填充的新结果。

（这是简化的代码，可以理解）

数据属性空数组开始：

    data () {
        return {
            articles: [],
        }
    },

首先，在页面加载时，articles 数组会填充 JSON 数据。

created() {
    axios.get(url)
        .then(response => {
            this.articles = response.data.data;
    });
},

然后，我想通过方法“加载更多”结果

loadMore() {
    axios.get(url)
        .then(response => {

            console.log('article\'s array data')
            console.log(this.articles)

            this.articles.push(response.data.data)

            console.log('new response array data')
            console.log(response.data.data)

            console.log('the updated array with pushed response array')
            console.log(this.articles)

    });
}

控制台日志

如果正确附加，这应该是一个 5 + 5 = 10 的数组，用于文章数组的长度。

两个响应都是正确的并且匹配 json，因为我已经通过 concat 进行合并。 但不可取，因为它会重新加载整个数组。

Answer 1

如果您反对 .concat，这是一种非常简单且高效的方式，您可以尝试以下方法：

const myArray = [1,3,4,5];
myArray.push(...[6,7,8,9);
console.log(myArray); // this will contain [1,2,3,4,5,6,7,8,9] now

Answer 2

从上面的@noa-dev 和@Shilly 的建议中获取 - 我使用 concat 如下。 必须在 var 中为 promise 设置响应，因为没有它就无法工作。 谢谢。

var new_array = response.data.data
this.articles = this.articles.concat(new_array)

解释 Vue 在使用 concat 时实际上并没有替换数组！ :) https://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array