javascript - 将输入值绑定(bind)到对象中的特定值

Question

我正在尝试构建一个时间表应用程序，用户可以在其中输入他们每天的工作时间。我将每个用户的数据存储在一个对象中，并且希望用每个小时(duration)填充表中的输入字段。为了说明我想要如何存储数据，我添加了一张图像:/image/tUHUx.jpg

还有一个 fiddle :https://jsfiddle.net/h64wafkp/14/

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

 {
"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绑定(bind)到每个相应的日期单元格(参见上图)。有什么建议吗？

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)"

如果您还需要将这些输入值的更新绑定(bind)回数据结构，则需要定义一个函数 setDuration并使用以下命令 input 来调用它属性:

@input="e => setDuration(user.id, day, e.target.value)"

您将再次按照上面的方式找到用户和时间，但随后您可能需要向 hours 添加一个小时对象。数组，您需要一个新的 id。我不知道在你的情况下如何生成新的 id 值，所以我将其留给你来实现(请参阅评论):

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
        });
    }
},

经过我们下面的交流，结果表明，如果没有 id，您的 ORM 将识别出需要插入(而不是更新)小时记录。属性，因此在这种情况下只需省略该行:

            id: getNewId(), // <--- implement this!