Vue.js将对象添加到现有数组

Question

I'm trying to add elements from json response to my existing array by clicking on a button but I have a problem with adding these elements properly.

Here I have an empty array called results where I'm storing my data from response.

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

This is my method for getting data:

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) {
    });

},

In this method I'm adding response data to array like this:

vm.results += response.data.data;

My respose is correct but after this operation my results array look like: "[object Object],[object Object]..."

I have also tried to add new elements by push method:

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

But then, elements are added in new arrays but I want to add objects to existing array.

Here is the structure of my response:

{"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...]

Answer 1

Try :

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

This will append the array "response.data.data" to the "results" array.

Answer 2

First of all you don't have to use var vm = this; , this.results will work even in your axios (and every other) callbacks in the context of a vue component.

But the actual problem is that you are using the concatenation += operator to add to an array. Simply use push with the spread operator ( ... ) instead and it should work.

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

})

Answer 3

ES6 way of doing this is using the spread operator ... :

 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])) 

When used on an array ...arr it means give me all elements in arr here , when used on an object ...obj it means give me a shallow copy of all enumerable properties of obj .

Just to prove it works with your case:

 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]))