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!', 
    } 
});