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

Question

我认为这是一个普遍的Javascipt问题，但我在Vue Js，Laravel＆amp; amp;爱可信。

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

这是一个简单的索引问题吗？我已经读过 concat 可以实现这一点，但我有一个＆＃34;加载更多＆＃34;按钮并希望附加数组并从底部增加大小，因此推送是合适的。 concat创建一个新数组并替换当前，这是不需要的，因为我想维护现有数组，只是增加大小以便更平滑地加载结果，比如Pinterest滚动和底部填充的新结果。

（这是简化代码以获得指出）

要启动的数据属性空数组：

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

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

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

然后，我想加载更多＆＃39;结果通过方法

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)

说明在使用concat时Vue如何实际上不替换数组！ :) https://vuejs.org/v2/guide/list.html#Replacing-an-Array