I am building with following scenario. Parent creates multi instances of a child component. Each child holds its data via input field. Child can ask to be removed and parent removes that instance. so far so good. So now is the problem, as soon as that instance is removed, its data gets passed/leaked to next sibling instance and if that instance is holding data, it gets moved to other next-to-it instance. I have reproduced it on fiddle
or see below
Vue.component('child', {
props:['data'],
template: `
<div>
index# {{data}}: {{messages}}
<input type="text" v-model="text" @keypress.enter="addMessage" placeholder="add some data then delete it">
<button @click="addMessage">Add</button>
<button @click="$emit('delete-me')">Delete</button>
</div>`,
data() {
return {
messages:[],
text: ''
}
},
methods: {
addMessage() {
this.messages.push(this.text)
this.text = ''
}
}
})
Vue.component('parent', {
template: `
<div>
Keep Adding new Instances
<button @click="newChild">New</button>
<hr />
<child v-for="(child, index) in children" key="index"
v-on:delete-me="deleteThisRow(index)""
:data="child"
></child>
</div>`,
data() {
return {
children:[]
}
},
methods: {
newChild() {
this.children.push(this.children.length)
},
deleteThisRow(index) {
this.children.splice(index, 1);
}
}
})
new Vue({
el: '#app',
template: `
<div>
<parent />
</div>
`,
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app"></div>