Vue JS中的时间跟踪网格系统可与PostgreSQL一起使用

Question

我正在尝试构建一个应用程序，用户可以通过在网格系统中记录数字来跟踪每天的工作时间。看起来像这样：https://jsfiddle.net/L5u1fc0a/130/-如果您尝试在任何“单元格”中添加一些数字，则会看到它像下面这样填充了JSON：

[ { "name": "Erik", "times": { "2018-10-01": "10" } } ]

我希望转换我的v模型，使其与PostgreSQL数据库一起很好地工作，在该数据库中，我有两个表，一个用于用户，另一个用于记录小时数。我的数据库中表示的数据如下所示：

 "userdata": [
    {
      "id": 2,
      "firstname": "Joe",
      "lastname": "Bergsen",
      "email": "joe@berg.com",
      "hour": [
        {
          "id": 1,
          "user_id": 2,
          "userinput": {
            "2018-10-10": 8
          }
        }
      ]
    }
  ],

因此，基本上，他们登录的每个小时都必须属于一个特定用户。不太确定如何遍历我的v模型。有什么见解吗？我需要进行v模型工作，以便它响应网格中的每个唯一输入值，并用相应的日期+输入值填充该值。