Question

我正在尝试通过单击按钮将json响应中的元素添加到现有数组中但是我在正确添加这些元素时遇到了问题。

这里我有一个名为results的空数组，我将从响应中存储数据。

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;

我的respose是正确的但在此操作之后我的结果数组看起来像： “[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...]

Answer 1

尝试：

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

这会将数组“response.data.data”附加到“results”数组。

Answer 2

首先，您不必使用var vm = this;，this.results即使在vue组件的上下文中的axios（以及其他所有）回调中也能正常工作。

但实际问题是您使用串联+=运算符添加到数组中。只需使用push代替展开运算符（...），它就可以正常工作。

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

})

Answer 3

ES6执行此操作的方法是使用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]))

在数组...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]))

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

3 个答案: