时间戳

首页 > 解决方案 > Vue JS 中的反应性来存储所做的所有更改？

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

问题描述

我正在尝试将单独的对象存储到一个数组中，问题是我不确定如何将先前的输入也存储起来——我的数据被覆盖了。我包含了一个简短的问题记录，希望能让事情变得清晰：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)，那不会将所有内容存储在一个大数组中，而是存储在一个大对象中，所以我也不能这样做。有任何想法吗？

标签： javascriptarraysobjectvue.js

解决方案

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

如果您想阅读所有用户的所有时间，您需要将它们全部加起来 - 我建议使用reduce，导致这一行：

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

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

[
  {
    "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"
  }
]

推荐阅读