![](/img/trans.png)
[英]How to add position in order to existing array in javascript / Vue.js?
[英]Vue.js add objects to existing array
我正在尝试通过单击按钮将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...]
尝试:
vm.results = vm.results.concat(response.data.data);
这会将数组“ response.data.data”附加到“结果”数组。
首先,您不必使用var vm = this;
,即使在vue组件的上下文中的axios(和其他所有)回调中, this.results
也将起作用。
但是实际的问题是您正在使用串联+=
运算符将其添加到数组中。 只需push
与传播算子( ...
)一起使用,它应该可以工作。
axios.get('http://127.0.0.1:8000/api/posts?page=' + this.pageNumber)
.then(response => {
this.results.push(...response.data.data);
})
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]))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.