Vue公司删除子组件

Question

我有这样的代码：

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的屏幕上。）

小提琴：https://jsfiddle.net/wgr3sxqr/6/

Answer 1

使用空的孩子，当你无法查看更改。

你所面对的问题是：

你删除任何孩子（假设孩子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!', 
    } 
});