I've been working on a Vue page where I want to have nested field collections, with a parent form and repeatable child forms.
Everything seems to be working fine except that when I try to delete one of the child forms, the template starts rendering incorrectly.
To see the issue in action, check out this fiddle example that I put together - https://jsfiddle.net/c4marcus/1mu2oceb/8/
In the sample data provided, there is basic information about The Beatles. If you click the trash can next to "Ringo," it mistakenly removes "George" instead of "Ringo."
However, upon submitting the form, the correct data is being saved (as shown in the screenshot below).
I suspect that the issue lies within the `MemberFormset` Vue component's `remove` method, which gets triggered when the trash can button is clicked.
remove: function(index) {
this.members.splice(index, 1)
this.$emit('input', this.members)
},
After splicing the data, the template should render the array of forms with the updated information.
<div class="form-group" v-for="(member, index) in members">
<member-form :model="member"
:index="index"
@input="update(index, $event)">
<div slot="trash">
<button type="button"
class="btn btn-default margin-top-md"
@click="remove(index)">
<i class="fa fa-trash"></i>
</button>
</div>
</member-form>
<hr v-if="separator(index)" />
</div>