2
我正在建設以下場景。 Parent創建一個子組件的多個實例。每個孩子通過輸入字段保存其數據。孩子可以要求被刪除，父母會刪除該實例。到現在爲止還挺好。所以現在就是這個問題，一旦這個實例被移除，它的數據被傳遞/泄漏到下一個兄弟實例，並且如果該實例正在保存數據，它就會被移動到其他的next-to-it實例。我在這裏重現它fiddle爲什麼數據泄露到兄弟組件的實例當刪除vue 2
或見下文
Vue.component('child', {
\t 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() {
\t return {
\t messages:[],
text: ''
}
},
methods: {
\t addMessage() {
\t 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() {
\t return {
\t children:[]
}
},
methods: {
\t newChild() {
\t this.children.push(this.children.length)
},
deleteThisRow(index) {
this.children.splice(index, 1);
}
}
})
new Vue({
el: '#app',
template: `
<div>
\t \t <parent />
</div>
`,
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app"></div>