刪除子組件會刪除該組件以及其後創建的所有子組件

Question

我刪除組件後刪除並重新創建任何組件後遇到問題。在被刪除並重新創建後，組件被刪除並創建子組件。

這是發生這種情況的原因嗎？

here is a video of it

Here is fiddle

小提琴代碼： :key goes on the v-for element：

Vue.component('column-component', { 
    props: ["columnData", "uniqueId"], 
    mounted: function() { 
     console.log('mounting column: ' + this.uniqueId) 
    }, 
    beforeDestroy: function() { 
     console.log('removing: ' + this.uniqueId) 
    }, 
    template: ` 
     <div style="float: left; padding: 10px; margin-right: 10px; border: 1px solid black;">aaa</div>` 
}) 

Vue.component('row-component', { 
    props: ["rowData", "uniqueId"], 
    data: function data() { 
     return { 
     columns: [], 
     columnCount: 0 
     } 
    }, 
    mounted: function() { 
     console.log('mounting row: ' + this.uniqueId) 
    }, 
    methods: { 
     addColumn() { 
     console.log 
        var column = new Object() 
      column.uniqueId = this.uniqueId +'.col.'+ this.columnCount 
      this.columns.push(column) 
      this.columnCount = this.columnCount + 1 
     } 
    }, 
    beforeDestroy: function() { 
     console.log('removing: ' + this.uniqueId) 
    }, 
    template: ` 
     <div> 
     <div style="margin: 10px; padding: 20px; background: rgba(0,0,0, 0.5);"> 
      row component: {{rowData.text}} 
      <div class="column" v-for="(column, index) in columns"> 
        <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component> 
      </div> 
      <div style="clear: both;"></div> 
      <div style="margin-top: 35px;"> 
       <button @click="addColumn()">add column</button> 
      </div> 
      </div> 
     </div>` 
}) 

new Vue({ 
    el: '#app', 
    template: ` 
     <div> 
      <div v-for="(row, index) in rows"> 
      <row-component :uniqueId="row.uniqueId" :row-data="row" :key="row.uniqueId"></row-component> 
      <button @click="deleteThisRow(index)">remove row</button> 
     </div> 
     <button @click="addRow()">add</button> 
     </div> 
    `, 
    data: { 
     rows: [], 
     rowCount: 0 

    }, 
    mounted: function() { 
     this.addRow() 
     this.addRow() 
     this.addRow() 
    }, 
    methods: { 
      addRow() { 
      var row = new Object() 
      row.uniqueId = 'row-' + this.rowCount 
      row.text = 'row-'+(this.rows.length) 
      this.rows.push(row) 
      this.rowCount = this.rowCount + 1 
     }, 
     deleteThisRow: function(index) { 
      this.rows.splice(index, 1) 

      console.log(this.rows) 
     } 
    } 
}) 

Answer 1

更新完全

好吧，我今天學到了一些東西。很多時候，v-for都在組件上，因此在組件上放置key或將組件放在v-for元素上沒有區別。你有一個div與v-for包裝組件，它有所作爲。它應該是：

<div class="column" v-for="(column, index) in columns" :key="column.uniqueId"> 
    <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component> 
</div> 

和

<div v-for="(row, index) in rows" :key="row.uniqueId"> 
    <row-component :uniqueId="row.uniqueId" :row-data="row"></row-component> 
    <button @click="deleteThisRow(index)">remove row</button> 
</div> 

Updated fiddle