Vue.js добавляет объекты в существующий массив

1

Я пытаюсь добавить элементы от json-ответа к существующему массиву, нажав на кнопку, но у меня есть проблема с правильной добавлением этих элементов.

Здесь у меня есть пустой массив, называемый результатами, где я храню свои данные из ответа.

export default {
  name: 'Posts',
  props: ['user_id'],
  data: function(){
      return{
          results: [],
          pageNumber: 1,
      }
  },.....

Это мой метод получения данных:

getData: function () {

    var vm = this;

    axios.get('http://127.0.0.1:8000/api/posts?page=' + vm.pageNumber)
    .then(function (response) {
        vm.results += response.data.data;

    })
    .catch(function (error) {
    });

},

В этом методе я добавляю данные ответа в массив следующим образом:

vm.results + = response.data.data;

Моя реакция правильная, но после этой операции массив результатов выглядит так: "[object Object], [object Object]..."

Я также попытался добавить новые элементы методом push:

vm.results.push(response.data.data);

Но тогда элементы добавляются в новые массивы, но я хочу добавить объекты в существующий массив.

Вот структура моего ответа:

{"current_page":1,
"data":[
{
"id":60,
"title":"Post 1",
"body":"Post 1 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
{
"id":61,
"title":"Post 2",
"body":"post 2 body",
"created_at":"2018-06-09 18:33:40",
"updated_at":"2018-06-09 18:33:40",
"user_id":8
},
etc...]
Теги:
object
arrays
vue.js

3 ответа

3
Лучший ответ

Пытаться:

vm.results =  vm.results.concat(response.data.data);

Это добавит массив "response.data.data" в массив "results".

Поделиться
  • 0
    Это работает! Большое спасибо!
  • 0
    Конечно, это работает - для этого был разработан Array.prototype.concat() . Более современный, предпочтительный подход в случае, если у вас есть процесс Babel в процессе сборки, хотя используется оператор распространения ... Тебе лучше привыкнуть, ты скоро это увидишь везде.
0

ES6 способ сделать это с помощью оператора распространения ...:

let a = [{name: 'Peter'}]
let b = [{name: 'Joanna'}, {name: 'Steven'}]

// use JSON.stringify so you don't see [Object object] when console logging
console.log('[...a, ...b]' + JSON.stringify([...a, ...b]))

При использовании в массиве ...arr это означает, что я даю мне все элементы в arr здесь, когда используется на объекте ...obj это означает дать мне мелкую копию всех перечислимых свойств obj.

Просто, чтобы доказать, что это работает с вашим делом:

let origArr = [{
    "id": 58,
    "title": "Post 1",
    "body": "Post 1 body",
    "created_at": "2018-06-09 18:33:40",
    "updated_at": "2018-06-09 18:33:40",
    "user_id": 8
  },
  {
    "id": 59,
    "title": "Post 2",
    "body": "post 2 body",
    "created_at": "2018-06-09 18:33:40",
    "updated_at": "2018-06-09 18:33:40",
    "user_id": 8
  }
]
let response = {
  data: {
    "current_page": 1,
    "data": [{
        "id": 60,
        "title": "Post 1",
        "body": "Post 1 body",
        "created_at": "2018-06-09 18:33:40",
        "updated_at": "2018-06-09 18:33:40",
        "user_id": 8
      },
      {
        "id": 61,
        "title": "Post 2",
        "body": "post 2 body",
        "created_at": "2018-06-09 18:33:40",
        "updated_at": "2018-06-09 18:33:40",
        "user_id": 8
      }
    ]
  }
}

console.log(JSON.stringify([...origArr, ...response.data.data]))
Поделиться
  • 0
    Хорошо, но как использовать это в этом конкретном случае? Результаты = [... результаты] + JSON.stringify ({... response.data.data}) не работает. Что я делаю не так?
  • 0
    results = [...results, ...response.data.data] Вызов JSON.stringify предназначен только для ведения журнала (поэтому вы видите правильное текстовое представление содержащихся объектов), а не для вашего реального кода.
Показать ещё 4 комментария
0

Прежде всего вам не нужно использовать var vm = this; , this.results будет работать даже в ваших аксиомах (и любых других) обратных this.results в контексте компонента vue.

Но фактическая проблема заключается в том, что вы используете оператор concatenation += для добавления в массив. Просто используйте push с оператором распространения (...) вместо этого, и он должен работать.

axios.get('http://127.0.0.1:8000/api/posts?page=' + this.pageNumber)
.then(response => {
    this.results.push(...response.data.data);

})
Поделиться
  • 1
    Это заставило бы его вставить массив в существующий массив вместо того, чтобы помещать эти элементы в свой массив ответов.
  • 0
    @connexo Мой плохой, не видел, что ответные данные были массивом. Вы все еще можете сделать это с помощью оператора распространения ... хотя.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню