Vue公司删除子组件
问题描述:
我有这样的代码:Vue公司删除子组件
Vue.component('parent', {
template: `
<div>
<child v-for='(child, index) in children' :key='index' :childNumber="index+1" v-on:removeChild="removeChild" />
</div>
`,
data: function() {
return {
children: [{}, {}, {}]
}
},
methods: {
removeChild: function(index) {
this.children.splice(index, 1);
}
}
});
Vue.component('child', {
template: `
<div>
<input :value="'I am child number: '+childNumber"></input>
<button v-on:click="removeChild">Remove child {{childNumber}}</button>
</div>
`,
data: function() {
return {}
},
methods: {
removeChild: function() {
this.$emit('removeChild', this.childNumber);
}
},
props: ['childNumber']
});
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
});
此刻,当你点击任何的“删除”按钮,将删除最后一个孩子,无论你点击了哪个按钮。我如何更改我的代码,以便删除您认为将要删除的孩子,而不触及其他孩子? (即点击“删除子2”将只留下孩子1和3的屏幕上。)
答
使用空的孩子,当你无法查看更改。
你所面对的问题是:
你删除任何孩子(假设孩子1)后,组件将重新呈现。由于您的命名仅基于索引,您将始终看到孩子(1和2)离开。原因是因为孩子2变成了1而孩子3变成了2等等。
解
尝试添加name
属性到每个部件,以查看的差异。也因为childNumber
是index + 1
您必须从删除方法中的索引中减去1
。
这里是您的案例的工作Fiddle。
这里是更新后的代码:
Vue.component('parent', {
template: `
<div>
<child v-for='(child, index) in children' :key='index' :childNumber="index+1"
v-on:removeChild="removeChild" :name="child.name"/>
</div>
`,
data: function() {
return {
children: [{name: 'child 1'}, {name: 'child 2'}, {name: 'child 3'}]
}
},
methods: {
removeChild: function(index) {
this.children.splice(index - 1, 1);
}
}
});
Vue.component('child', {
template: `
<div>
<input :value="'I am ' + name"></p>
<button v-on:click="removeChild">Remove {{name}}</button>
</div>
`,
data: function() {
return {}
},
methods: {
removeChild: function() {
this.$emit('removeChild', this.childNumber);
}
},
props: ['childNumber', 'name']
});
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
}
});
完美。谢谢。 –