将VueJS时间输入传递给Rails输入

Question

我正在构建一个rails应用程序，并希望添加一个时间跟踪器。用户应该能够记录一个时间（我工作了3个小时）并提交，或者他们应该能够启动计时器，等待，然后提交。我选择了VueJS来构建它，并成功地将Vue与我的Rails 5应用程序集成在一起。

我在Vue中构建了一个简单的计时器（启动，停止，显示当前时间）并嵌入到我的页面中。现在我希望用户填写一些其他字段并保存时间条目。

我试图从Vue数据中获取小时，分钟和秒的值，并使用v-models将其连接到基本的simple_form time字段，但由于rails自动生成输入字段time_entry_duration_4i和time_entry_duration_5i，我正在努力连接数据。

我是否应该将JS数据推送到rails表格？我是否应该重建表单，以便全部使用Vue并始终以这种方式提交？

谢谢。

#time_entries/_form.html.haml

= simple_form_for(@time_entry) do |f|
  = f.error_notification
  = f.error_notification message: f.object.errors[:base].to_sentence if f.object.errors[:base].present?

  .form-inputs.row
    .col
      = f.association :project, collection: Project.joins(:assigned_roles).where(assigned_roles: {team_member: current_user}).distinct, hint: "If this is blank, you're not currently assigned to any projects."
      = f.input :task, collection: TaskType::TASK_TYPES.sort {|a, b| a <=> b }
  .form-inputs.row
    // This is the Rails way of doing things and works, but I can't connect it to the v-model
    = f.input :duration, as: :time, wrapper_html: { class: 'col-6'}, default: Time.parse('0:00')
    .col-6.form-group
      .d-flex.flex-row.justify-content-between
        = f.label :duration, label: "Hours"
        = f.label :duration, label: "Minutes"
        = f.label :duration, label: "Seconds"

      .d-flex.flex-row.justify-content-between.align-items-center
        // This is my attempt to recreate the hours/min/seconds and bind to the v-model, but it doesn't submit
        = f.text_field :duration, "v-model" => "hours", class: 'form-control mx-1'
        = f.text_field :duration, "v-model" => "minutes", class: 'form-control mx-1'
        = f.text_field :duration, "v-model" => "seconds", class: 'form-control mx-1'
    = f.input :date, wrapper_html: { class: 'col-6'}

  .form-inputs.row
    .col
      = f.input :notes, placeholder: "What were you working on?"

  .form-actions
    = f.button :submit, class: 'btn btn-primary btn-block'