Pass VueJS Time Inputs to Rails Inputs - ruby-on-rails

Question

I'm building a rails application and want to add a time tracker. The users should be able to log a time (I worked for 3 hours) and submit, or they should be able to start a timer, wait, and then submit. I picked VueJS to build it out, and successfully have integrated Vue with my Rails 5 application.
I built out a simple timer (start, stop, display current time) within Vue and embedded in my page. Now I want the user to fill out some additional fields and save the time entry.
I've attempted to just take the values for the hours, minutes, and seconds from the Vue data and connect it using v-models to a basic simple_form time field, but since rails automagically generates the input fields as time_entry_duration_4i and time_entry_duration_5i, I'm struggling to connect the data.
Should I even go about pushing the JS data into a rails form? Should I just rebuild the form so it's all in Vue and always submitted that way?
Thanks.
#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'

Answer 1

You can mix rails and Vue by writing the inputs with plain html:
.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
input type="text" name='time_entry[duration(4i)]' v-model="hours" class='form-control mx-1'
input type="text" name='time_entry[duration(5i)]' v-model="minutes" class='form-control mx-1'
input type="text" name='time_entry[duration(6i)]' v-model="seconds" class='form-control mx-1'