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

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

  1. form should be a data property.
  2. 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.


Another way achieve this is using bracket notation of accessing object property.

<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>