Vue.js: How to bind key in name input attribute

Question

I need "repositories[][name]" to be left with the key value "repositories[key][name]" to group the values when the form is submitted.

I can't find a way to add the key value. How can I do this function?

<tr v-for="(repository, key) in options.repositories">
<td><input type="text" name="repositories[][name]"
           :value="repository.name"
           class="form-control">
</td>
<td><input type="text" name="repositories[][url]"
           :value="repository.url"
           class="form-control">
</td>
<td><input type="text" name="repositories[][type]"
           :value="repository.type"
           class="form-control">
</td>

EDIT: I need the three values of the image to be grouper with the value "key"

For exemple in this case:

repositories[key] = [name => 'Product Grid', url => '...', type => 'vcs']

For this I need the value "key" to be printed in html.

Whats the data structure of options.repositories? Can you please update that in your ques with an eg mock ds? — Shivam Singh
– Shivam Singh, Commented Mar 20, 2020 at 14:56

Kevyn Klava · Accepted Answer · 2020-03-20 13:59:46Z

1

To bind you only need to use : like this:

    <tr v-for="(repository, key) in options.repositories">
    <td><input type="text" :name="repositories[key][name]"
               :value="repository.name"
               class="form-control">
    </td>
    <td><input type="text" :name="repositories[key][url]"
               :value="repository.url"
               class="form-control">
    </td>
    <td><input type="text" :name="repositories[key][type]"
               :value="repository.type"
               class="form-control">
    </td>

answered Mar 20, 2020 at 13:59

Kevyn Klava

3161 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chdzma Over a year ago

But this functionality does not print the value "key" to me in the html. I have updated the main post with an example.

Collectives™ on Stack Overflow

Vue.js: How to bind key in name input attribute

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related