When a user clicks on the "add another" button, I want to create a duplicate text input field and increase the index of the new field. I found this question that is similar, but the solution provided did not successfully increment the index.
The current implementation duplicates the field and increments the index, but it affects all indexes rather than just the newest one (thanks to Roy J for pointing this out).
Below is the template being used:
<div id="app">
<template v-for="slot in timeslots">
<div><input type="text" name="performances[@{{ count }}][timestamp]" v-model="slot.timestamp" placeholder="index @{{ count }}"></div>
</template>
<span class="add green btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
<pre>@{{ timeslots | json }}</pre>
</div>
Here is the corresponding Vue JS code:
new Vue({
el: '#app',
data: {
timeslots: [
{
timestamp: '',
count: 0
}
],
count: 0
},
methods: {
addAnother: function(){
this.timeslots.push({
timestamp: '',
count: this.count++
});
}
}
});