А откуда вы взяли, что у вас там массив? Вы сообщение об ошибке вообще читали? Если "this.articles.push is not a function", значит
this.articles
- это не массив, у массивов метод push есть. Изначально да - массив, но когда вы в
created
вызываете
getArticles
, производится перезапись свойства. Неплохо было бы разобраться, что на самом деле возвращает запрос на получение статей - уж не объект ли?
UPD. Вынесено из комментариев:
Да, не массив, а объект. Я просто и так и так пробовал. Смог добавить таким способом.
this.articles = Object.assign(this.articles, response.data.payload);
Но значение добавилось не так как нужно.
Присваивание бессмысленное -
Object.assign
модифицирует первый аргумент, а не создаёт новый объект.
Кроме того,
vue не отслеживает установку значений по индексу.
Сам способ добавления данных в массив сомнительный - что если имена свойств пришедшего объекта не образуют корректного набора индексов? Типа, начинаются не с нуля, есть пропуски... А если какие-то из имён свойств вообще не могут быть использованы в качестве индекса массива? - само свойство создано будет, но
v-for
(как и методы -
forEach
,
map
, ...) не будет его обрабатывать. Доставайте из объекта массив значений и уже его элементы добавляйте в
articles
:
this.articles.push(...Object.values(response.data.payload));
Это если именно "добавить в существующий". Но, поскольку изначально он пустой, в
getArticles
можно просто заменить один массив другим:
this.articles = Object.values(response.data.payload);
А вообще - какого чёрта? Ждёте массив, а приходит объект... Или исправьте бекенд, чтобы приходил массив, или не ждите массива - замените дефолтное значение
articles
на пустой объект, а в
getArticles
по получении данных просто выполняйте присваивание:
this.articles = response.data.payload
. А там, где пытаетесь
concat
выполнить, создавайте новый объект, в который будут копироваться свойства существующего и результат запроса:
this.articles = { ...this.articles, ...response.data.payload };
// или
this.articles = Object.assign({}, this.articles, response.data.payload);