Как правильно вставить массив JSON в существующий массив данных в Vue JS для ответа Axios?

Question

Я думаю, что это общий вопрос Javascipt, однако я работаю в Vue Js, Laravel & Axios.

Как вставить один массив JSON в другой массив JSON?Моя проблема заключается в том, что когда я помещаю вторичный массив в первичный массив, он вкладывается (см. Скриншот).Мне нужно как часть одного и того же массива.

Это простая проблема индекса?Я читал, что concat может достичь этого, но у меня есть кнопка «загрузить еще», и я хочу добавить массив и увеличить размер снизу, поэтому push подходит.concat создает новый массив и заменяет текущий, что нежелательно, поскольку я хочу сохранить существующий массив и просто увеличить размер для более плавной загрузки результатов, как при прокрутке Pinterest, а новые результаты отображаются внизу.

(это упрощенный код для определения точки)

Свойство данных пустой массив для запуска:

    data () {
        return {
            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

Получено по советам @ noa-dev и @Shilly выше - я использовал concat, как показано ниже.Ответ должен был быть установлен в переменную для обещания, поскольку не работал без.Спасибо.

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

Объяснение того, как Vue фактически не заменяет массив при использовании concat!:) https://vuejs.org/v2/guide/list.html#Replacing-an-Array

Answer 2

Если вы против .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