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

新手上路,请多包涵

我试图通过单击按钮将 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;

我的反应是正确的,但在这个操作之后我的结果数组看起来像:“[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...]

原文由 VividDreams 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 806
2 个回答

尝试 :

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

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

原文由 JeffProd 发布,翻译遵循 CC BY-SA 4.0 许可协议

首先,您不必使用 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);

})

原文由 Philip Feldmann 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏