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

Posted 2023-02-22

【中文标题】Vue.js 将对象添加到现有数组

【英文标题】：Vue.js add objects to existing array

【发布时间】：2018-11-19 21:10:29

【问题描述】：

我正在尝试通过单击一个按钮将 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;

我的反应是正确的，但是在这个操作之后我的结果数组看起来像： “[对象对象],[对象对象]...”

我也尝试过通过 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...]

【参考方案1】：

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

)

【讨论】：

这将使他将一个数组推送到他现有的数组中，而不是将这些元素推送到他的响应数组中。

@connexo 我的错，没有看到响应数据是一个数组。不过，您仍然可以使用扩展 ... 运算符来做到这一点。

是的，正如@connexo 所说，它会在我现有的数组中创建新数组。传播运算符是什么意思？而且我已经检查过我仍然必须在 axios 中使用这个 vm 变量而不是这个。

@VividDreams 扩展运算符总是会引起很多混乱。它实际上是三个点，所以... 是代码的一部分。它从对象（或数组）中获取内容并将其展开，因此基本上将传入数据的每个元素推送到结果数组中。它在很多情况下都非常有用，你可以在这里查看文档developer.mozilla.org/en-US/docs/Web/javascript/Reference/…。

this.results.push(...response.data.data); 不起作用有两个原因：push 需要一个数组元素，并在数组末尾添加它被调用。 this 不是您在这里所期望的，您要么必须使用箭头语法 .then((response ) => /*whatever*/) 要么使用 Function.prototype.bind() 方法，如 .then(function (response) /*whatever*/ .bind(this))

【参考方案2】：

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

【讨论】：

好的，但是在这种特定情况下如何使用它呢？结果 = [...results] + JSON.stringify(...response.data.data) 不起作用。我做错了什么？

results = [...results, ...response.data.data] 对JSON.stringify 的调用仅用于记录（因此您可以看到所包含对象的正确文本表示），而不是用于您的真实代码。

好的，谢谢。我没有设置 babel，所以我现在无法检查这个是否有效。不在 chrome 中工作，根据规范，它应该在没有 babel 的 chrome 上工作。它给了我一个空数组。

那不是由于传播运算符，那么一定有其他东西破坏了它。此外，对于任何 vue 模板，您已经包含了 Babel 设置。不要使用 <script src="/path/to/vue.min.js"> 版本的 Vue，那样你就错过了 Vue 最好的部分。

根据您提供的示例数据添加了一个示例，以证明其有效。我建议您尝试识别代码中的错误，仅出于练习原因给您一个空数组 - 它可能有助于您理解扩展运算符。

【参考方案3】：

试试：

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

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

【讨论】：

当然可以——这就是Array.prototype.concat() 的设计目的。如果您在构建过程中使用 Babel 转译，则更现代、更可取的方法是使用扩展运算符 ...。你最好习惯它，你很快就会到处看到它。