如何使用 Vue JS 将一组对象中的一个对象替换为另一个对象？答案

【问题标题】：How do I replace one object by another in an array of objets with VueJS?如何使用 Vue JS 将一组对象中的一个对象替换为另一个对象？
【发布时间】：2019-03-20 21:07:08
【问题描述】：

我正在使用 VueJS 和 AdonisJS 构建一个网站，我正在设置发布或取消发布文章的可能性，只需将 draft 属性设置为 true 或 false。

这个属性版本可以从索引中看到，所有文章都可以看到。我制作了一个表格，其中有一个可以切换属性的操作按钮，该按钮将使用 ID 向 Adonis 发送 HTTP POST 请求。

我担心之后会发生什么：我不认为替换整个阵列是好的选择，但我应该怎么做呢？我尝试了以下方法：

handlePublish (id) {
  this.$axios.post('/post/publish', {id: id}, {
    headers: {
      'Authorization': `Bearer [some token]`
    }})
    .then(response => {
      console.log(response)
      let toDelete = ''
      this.posts.map((post, index) => {
        if (post.id === id) {
          toDelete = index
        }
      })

    this.posts.splice(toDelete, 1)
    this.posts.push(response.data)
 })
 .catch(e => console.log(e.response))
}

但不知何故，除了数据库之外，什么都没有更新。

提前谢谢你

【问题讨论】：

当您可以简单地更新已经在数组中的现有帖子时，为什么还要切片和推送整个帖子？我的意思是你没有改变数据结构，你只是在更新一个 Object 属性。在success 上，您只需在您的帖子数组中找到您从回复中获得的帖子并更新其draft 属性。
好的，我不知道这是可能的，我以为我会以某种方式破坏某些东西，谢谢！

标签： arrays object vue.js

【解决方案1】：

您正在使用map 迭代数组。相反，您可以使用map 通过返回新元素代替旧元素来获取更新的数组，

.then(response => {
    this.posts = this.posts.map((post, index) => {
        if (post.id === id) {
          return response.data
        }
    })
}

【讨论】：

谢谢，它就像一个魅力（它向我展示了我犯的一些错误，非常感谢！）