Vue JS 中的反应性来存储所做的所有更改？

Question

我正在尝试将单独的对象存储到一个数组中，问题是我不确定如何将之前的输入也存储起来 - 我的数据被覆盖了。我附上了这个问题的简短记录，希望能让事情变得清晰：https://vimeo.com/306470918

这是代码的关键： https://jsfiddle.net/h64wafkp/46/

我可以将所有内容都推送到现有数组中，但这一切都是错误的，而且我被数组内部数组类型的格式所困扰，这会使事情变得混乱..知道如何解决这个问题吗？我想保留

的格式

 [
  {
    "id": 3,
    "user_id": 2, // notice id is user 2
    "date": "2018-12-04",
    "duration": 10
  },
  {
    "id": 4,
    "user_id": 1, // another user id in the same array
    "date": "2018-12-13",
    "duration": 41
  },
] 

而不是

[
  [
    {
      "id": 2,
      "user_id": 1,
      "date": "2018-12-03",
      "duration": 13
    },
    {
      "id": 1,
      "user_id": 1,
      "date": "2018-12-02",
      "duration": 13
    },
  ]
] 

如果我执行Object.assign({}, object1, object2) 之类的操作，它不会将所有内容存储在一个大数组中，而是存储在一个大对象中，所以我也不能这样做。有什么想法吗？

Answer 1

如果我理解您的问题是正确的，您需要将所有当前设置的时间读入一个数组。在你的小提琴中，你在最后有 this.newHours = user.hours 行，只返回当前用户的时间。

如果您想阅读所有用户的所有小时数，您需要将它们全部加起来 - 我建议使用 reduce，从而产生这一行：

this.newHours = this.users.reduce((hours, user) => [...hours, ...user.hours], []);

将4 添加到nas 12 月5 日的输入中，将导致：

[
  {
    "id": 2,
    "user_id": 1,
    "date": "2018-12-03",
    "duration": 13
  },
  {
    "id": 1,
    "user_id": 1,
    "date": "2018-12-02",
    "duration": 13
  },
  {
    "id": 3,
    "user_id": 2,
    "date": "2018-12-04",
    "duration": 10
  },
  {
    "id": 4,
    "user_id": 2,
    "date": "2018-12-13",
    "duration": 41
  },
  {
    "user_id": 2,
    "date": "2018-12-05",
    "duration": "4"
  }
]