[Vuejs]-How can I bind an object values to the dynamically added input field using vue Js

There is no such a data item[index], try with:

v-model="dataArray[0][index]"

In your example, item is an object (dataArray[0]). Object properties don’t have an index, so it’s not possible to do what you’re trying. item[index] is looking for a property key named “0”, “1” and “2”, which don’t exist.

If all your objects in dataArray have different properties, you should create an array of the object keys using Object.keys() and use those to get all the property values. (see this question for examples).

No need for index in this case as the item already represents the value:

<input v-for="(item,index) in dataArray[0]" :key="index" v-model="item"></input>

However the issue with this approach is that your model won’t be reactive. One way around it is to do it this way.

1. Change your html to
   
<input v-for="(item,index) in dataArray[0]" :key="index" @keyup="change(index, $event.target.value)"></input>


2. Add change method to your Vue instance code:
   
methods: {
change(index, val) {
this.dataArray[0][index] = val;
console.log(index + ': ' + val);
}
}


I am actually would be curious to see what another solution for this might be.