Using a content management system, I am designing a front-end form that allows theatre directors to input multiple showtimes. There is a button they can click to add another input field if needed (side note: I am still figuring out how to implement a 'remove last' button using Vue, but that's for another time).
I have successfully implemented the addition of new fields. However, when a director returns to edit the showtimes they created, I need the Vue counter to start at the number of existing fields. For example, if they already defined 3 showtimes (0,1,2), the first dynamically placed field with Vue should begin at 3.
Alternatively, I am considering generating an array of existing data in Vue when the page loads, but I am unsure of where to begin with this approach.
Below is my HTML and Vue JS:
new Vue({
el: '#app',
data: {
timeslots: [
{
count: 0
}
],
count: 0
},
methods: {
addAnother: function(){
this.timeslots.push({
count: ++this.count
});
}
}
});<div id="app">
{{ performances }}
<input name="performances[{{ zero_index }}][showtime]" value="{{ showtime }}">
{{ /performances }}
<template v-for="slot in timeslots">
<input name="performances[@{{ slot.count }}][showtime]" value="{{ now }}">
</template>
<div>
<button @click.prevent="addAnother">Add another</button>
</div>
</div>Any guidance on how to proceed would be greatly appreciated!