how can I bind an object values to the dynamically added input field using vue Js

Question

I have an object in an array which properties and values are dynamically added like this

  dataArray: [
    {
      first_name: "john",
      last_name: "doe",
      age: "45"
    }
  ]

I want to create input field corresponding to the object property so I do this

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

Input fields are created but how can I bind the value with the object property, i try to do with (v-model="item[index]") but its not working.

If you change `v-model="item"` it will print your values in the input fields, but I don't think those will be reactive. — i--, Oct 26 '18 at 15:12

score 0 · Answer 1 · answered Oct 26 '18 at 10:01

0

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

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

answered Oct 26 '18 at 10:01

DedaDev

4,441
2
21
28

Yeah, I tried with the wrong directive, Now it works fine. – Hasanuzzaman Oct 26 '18 at 10:36

score 0 · Answer 2 · answered Oct 26 '18 at 10:10

0

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

answered Oct 26 '18 at 10:10

Quark

51
5

Not true. You can use interchangably `item.index` as well as `item[index]`. In the question above it works `dataArray[0][index]`, but not as `item[index]` for some reason and I am trying to figure it as I am curious. – i-- Oct 26 '18 at 15:03

score 0 · Answer 3 · answered Oct 26 '18 at 16:04

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.

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

how can I bind an object values to the dynamically added input field using vue Js

3 Answers3