Vue.js 从阵列中删除组件时，vuejs会删除错误的组件

我需要能够从阵列中删除特定组件。我使用splice执行此操作，虽然该组件定义已从阵列中删除，但vuejs删除了错误的组件。它总是删除最后添加的组件

这是一把小提琴，它可以证明这一点：

下面是一段视频，展示正在发生的事情：

下面是一些代码：

Vue.component('row-component', {
    props: ["rowData", "uniqueId"],
    mounted: function() {
        console.log('mounting: ' + this.uniqueId)
    },
    beforeDestroy: function() {
      console.log('removing: ' + this.uniqueId)
    },
    template: `
        <div>
            row component: {{rowData}}
            <button @click="$emit('delete-row')">Delete</button>
        </div>`
})

new Vue({
    el: '#app',
    template: `
        <div>
            <row-component v-for="(row, index) in rows" :row-data="row" :uniqueId="index" v-on:delete-row="deleteThisRow(index)"></row-component>
            <button @click="add()">add</button>
        </div> 
    `,
    data: {
        rows: ["line1", "line2", "line3", "line4", "line5"],

    },
    methods: {
            add() {
            this.rows.push('line'+(this.rows.length+1))
        },
        deleteThisRow: function(index) {
            this.rows.splice(index, 1)

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

如果查看console.log函数打印的内容，它将删除最后添加的组件。这是一个问题，因为在装载每个组件时，我仅为该组件创建侦听器：

this.$bus.$on('column-'+this.uniqueId+'-add-block', this.handlerMethod)

当vue删除最后一个组件时，此事件侦听器将不再工作

我怎样才能解决这个问题

在我自己的应用程序中，这是我创建子组件的方式：

let column = new Object()
column.uniqueId = this._uid+'-column-' + this.addedColumnCount
column.text = '1/2'
this.columnList.push(column)
this.addedColumnCount = this.addedColumnCount + 1

请注意，在添加组件时，我是如何为其创建uniqueId的：

column.uniqueId = this._uid+'-column-' + this.addedColumnCount

当我试图删除一个组件时，它总是向我报告，最后添加了uniqueId的组件正在被删除

    beforeDestroy: function() {
        this.$bus.$off('column-'+this.uniqueId+'-add-block', this.handlerMethod)
        console.log('removing: ' + this.uniqueId)
    },

---

您没有一个

：键

绑定来告诉Vue哪一行与哪个组件一起使用。Vue使用快捷方式使视图看起来与viewmodel的状态相同。如果您将

：key=“row”

添加到

v-for

，则它可以工作

---

您好，我现在遇到了一个问题，当我删除一行时，该行之后创建了其他行，然后所有这些行都被删除并重新创建，下面是一个视频：您可以在这里测试它：不确定为什么会发生这种情况，我将删除按钮从子组件向上移动到父组件，并将v-for移动到保存行组件的div中。如何通过删除第一行组件来避免在删除第一行组件后，所有其他行组件也被删除，然后重新创建？这也救了我的命。完美答案。

    beforeDestroy: function() {
        this.$bus.$off('column-'+this.uniqueId+'-add-block', this.handlerMethod)
        console.log('removing: ' + this.uniqueId)
    },