Question

88

Dynamic V-model name in a v-for loop Vue 2

rated 0 times [ 94] [ 6] / answers: 1 / hits: 98462 / 7 Years ago, wed, april 12, 2017, 12:00:00

I am developing an application and I am using Vue 2 as the javascript framework,
inside a v-for loop I need the counter of the loop to be bound to the v-model name of the elements, this my code:

<div v-for=n in total class=form-group>

    <input type=hidden id=input_id :name='input_name_id['  + n  + ']' v-model=form.parent_id_n />

</div>

I need n to be the counter of the loop, for example for the first element it should be:

<div class=form-group>

    <input type=hidden id=input_id :name='input_name_id[1] v-model=form.parent_id_1 />

</div>

the name attribute binding works but I have no idea how to get the v-model working as well?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cadendericki

Add To Favorites

Follow

Total Points: 482

Total Questions: 109

Total Answers: 103

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

cadendericki questions

1 ERROR TypeError: Cannot read properties of undefined (reading 'phones')

Tue, Mar 22, 22, 00:00, 2 Years ago

1 firefox browser does not start in playwright

Wed, Apr 7, 21, 00:00, 3 Years ago

1 React Creating Dynamic Select and Option Elements with Material-UI

Wed, Jan 27, 21, 00:00, 3 Years ago

1 How to use the vue router in another file?

Wed, Jul 8, 20, 00:00, 4 Years ago

1 Format column header dates in FullCalendar

Thu, May 14, 20, 00:00, 4 Years ago

View All

answered 7 Years ago janeth · Accepted Answer

To use v-model with form.parent_id[n]:

form should be a data property.

form.parent_id should be an array.

Then you can do the following:

<div id=demo>

  <div v-for='n in 3'>

    <input v-model=form.parent_id[n]>

  </div>

  <div v-for='n in 3'>

    {{ form.parent_id[n] }}

  </div>

</div>

by having a vue instance setup like:

var demo = new Vue({

    el: '#demo',

    data: {

      form: {

        parent_id: []

      }

    }

})

Check this fiddle for a working example.