gpt4 book ai didi

vue.js - 从数组中删除组件,vuejs 删除了错误的组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:14:22 24 4
gpt4 key购买 nike

我需要能够从数组中删除特定的组件。我使用 splice 来执行此操作,尽管该组件定义已从数组中删除,但 vuejs 删除了错误的组件。它总是删除最后添加的组件。

这是一个提供演示的 fiddle :

https://jsfiddle.net/wjjonm8n/

这是显示正在发生的事情的视频:

https://maxniko.tinytake.com/sf/MTg3NTI5NF82MDIxNDAx

这里是一些代码:

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)
}
}
})

这个函数告诉我 vuejs 真正删除了什么:

    beforeDestroy: function() {
console.log('removing: ' + this.uniqueId)
}

如果您查看 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)
},

最佳答案

您没有 :key 绑定(bind)来告诉 Vue 哪一行对应哪个组件。 Vue 使用快捷方式使 View 看起来与 View 模型的状态相同。如果您将 :key="row" 添加到 v-for,它会起作用。

Updated fiddle

关于vue.js - 从数组中删除组件,vuejs 删除了错误的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45710853/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com