Question

我正在尝试构建一个时间表应用程序，用户可以在其中输入他们每天工作的小时数。我正在将有关每个用户的数据存储在一个对象中，并希望在每个小时（duration）的表中填充一个输入字段。为了说明如何存储数据，我添加了一个图像：https://imgur.com/a/WmV4GvU

还有一个小提琴：https://jsfiddle.net/h64wafkp/14/

基本上，数据库中的每个用户与另一个称为“小时”的表具有一对多关系，因此数据结构如下所示：

 {
"id": 1,
"firstname": "JayZ",
"lastname": "Carter",
"email": "jay@rocafella.com",
"hours": [
  {
    "id": 226,
    "user_id": 1,
    "date": "2018-12-05",
    "duration": 140
  },
  {
    "id": 1,
    "user_id": 1,
    "date": "2018-12-02",
    "duration": 13
  },
  {
    "id": 2,
    "user_id": 1,
    "date": "2018-12-03",
    "duration": 13
  }
]

}，

然后是表本身，它只是一个普通的html表，每一天都作为列标题。我的问题是如何将每个duration绑定到各个日期单元格（请参见上图）。有什么建议吗？

Answer 1

在您的methods中定义一个函数，以获取给定用户的持续时间和日期：

getDuration(user_id, date) {
    const user = this.users.find(user => user.id == user_id);
    const hour = user.hours.find(hour => hour.date == date);
    return hour ? hour.duration : 0;
},

然后在HTML部分中，将:value属性添加到input元素：

:value="getDuration(user.id, day)"

如果您还需要将 updates 绑定到这些输入值并返回数据结构，则需要定义一个函数setDuration并使用以下{{1} }属性：

input

您将再次如上查找用户和小时，但是您可能需要将小时对象添加到@input="e => setDuration(user.id, day, e.target.value)"数组中，在此您需要一个新的ID。我不知道您如何在您的情况下生成新的id值，所以我将留给您实施（请参见评论）：

hours

在进行下面的交流后，发现如果没有setDuration(user_id, date, duration) { const user = this.users.find(user => user.id == user_id); const hour = user.hours.find(hour => hour.date == date); if (hour) { hour.duration = duration; } else { user.hours.push({ id: getNewId(), // <--- implement this! user_id, date, duration }); } },属性，则您的ORM将识别出需要插入一个小时记录（而不是更新），因此在这种情况下，省略该行：

id

将输入值绑定到对象中的特定值

1 个答案: