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

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?

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> 

Repeated text filed 10 times and separated v-model for each

<v-text-field
  v-for="(n,index) in 10"
  :key="index"
  v-model="pricing.name[n]"
  color="info"
  outline
  validate-on-blur
/>

storing data

data() {
    return {
     pricing:{
      name: [],
        }
      }

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pick up these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).

this code worked for me:

> HTML

<input type="number" @input="updateValue($event, i, 'pci')" :value="form.neighbours[i].pci" />

> JS

        updateValue(event, i, key) {
            const neighbour = {...this.form.neighbours[i]};
            neighbour[key] = event.target.value;
            this.form.neighbours.splice(i, 1, neighbour)
        }

Assuming input_name_id is a string, What you need to do is :name="'input_name_id' + n"

Here is a working solution