Question: how to use v-for for dynamic attributes?

[dceluis]

Hi! Thank you for such a helpful gem.

Is there any way to create nested attributes with v-for? Right now, I tried use fields_for, but if the model has more than one association record then you get more than one element with a v-for.

I attach a screenshot so it's more clear:

[kuroda]

@sanchez2210 Thank you for the feedback.

I think your problem can be solved like this:

<div class="form-group>
  <%= f.fields_for :milestone, @roadmap.milestones do |g| %>
    <%= g.hidden_field :title %>
  <% end %>
  <input type="text"
    v-for="(m, index) in roadmap.milestones_attributes"
    v-model="roadmap.milestones_attributes[index].title"
    :name="'roadmap[milestones_attributes][' + index + '][title]'">
</div>

Sorry if misunderstand what you want to achieve.

[dceluis]

Thank you for the reply! @kuroda Unfortunately, that's not going to work, since I'm also using vue-data-scooper, and the plugin builds the data attribute from the v-model attributes AFAIK.

So my data object ends up looking like this:

Do you think vue-data-scooper should build the data from the name attributes instead?

Cheers!

[kuroda]

@sanchez2210

In my environment, my idea seems to go well.

I have constructed a demo: https://github.com/kuroda/vue-rails-form-builder-demo

Clone this demo and checkout the branch fields_for_experimental.

After starting the Rails server and webpack dev server, go to the Database Scaffold Form, add a new customer and edit it.

You will see three text inputs for the phone numbers:

Here is the data of phones_attributes:

Compare carefully its app/views/customers/_fields.html.erb with your code.

I believe that you made some mistakes on your HTML template. Please share it if possible.

[kuroda]

I close this issue because no discussion occurs for a while. Please reopen it if necessary.