I have and array of objects, this is indefinite array, may push or splice things here. I need to bind the property of an object to a input dom with vue, doesnt seem to work.
items : [
{ prop1: 123, prop2: 'test', prop3: 'foo' },
{ prop1: 321, prop2: 'tset', prop3: 'bar' },
]
}
<li v-for="item in items">
{{ item.prop2 }}
<input type="text" v-model="item.prop1">
</li>
</ul>
You could use index to do that. For example:
<li v-for="(item, index) of items">
{{ item.prop2 }}
<input type="text" v-model="items[index].prop2">
</li>
Another way to do that and I recommend it is to use a event, like v-on:input or simply @input on yout input an call a method that find your item in your items to change your prop2 value.
<li v-for="(item, index) of items">
{{ item.prop2 }}
<input type="text" @input="updateMyProp(index)">
</li>
...
methods: {
updateMyProp ($event, index) {
// your update logic here
// you can use 'this.items', Object.assign, Vue.set, etc... to update your value
}
...
data[index].prop = value I did $this.set(item, 'prop', value) and it worked vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
<input type="text" v-model="items[index].prop2" :key='items[index].unique_prop'> NOT <input type="text" v-model="items[index].prop2" :key='item.unique_prop'> I experienced that the latter does not work with item slots on v-autocomplete components. Probably others too.
@input="updateMyProp(index) be @input="updateMyProp($event, index)?