Реакционная способность в 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 во вход для 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"
  }
]