Currently, I have a series of text input fields generated through a v-for loop with a v-model linked to an array. My goal is to incorporate new elements into the array, which in turn creates additional input fields.
While everything seems to be functioning correctly so far, there's an issue where the new input fields appear to be sharing the same index or some other anomaly that causes them to display identical values.
To better illustrate this problem, I've created this JSFiddle. If you click the button twice and proceed to edit one of the newly added input boxes, all the new input boxes will reflect the edited value. Ideally, only the modified input box should display the new value.
I suspect there might be something critical that I am overlooking here. Is there anyone willing to provide assistance with this issue?
Javascript:
new Vue({
el: '#app',
data: {
items: [{name: "one", id: 0}],
template: {
name: "two",
id: 2,
},
},
methods: {
addRow: function(){
this.items.push(this.template);
this.items[this.items.length - 1].id = Math.random();
}
}
})
HTML:
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div v-for="(item,index) in items" :key="item.id">
<input v-model="item.name">
</div>
<button v-on:click="addRow">
Add row
</button>
<div>Array content: {{items}}</div>
</div>