如何解决即使我是方法变量,vueJs 也会更新道具
我有以下方法比较两个数组,一个来自道具,另一个来自我自己的组件。我的 props 数组中存在但不存在于我的 components 数组中的每个元素都插入到第三个数组中,并添加了名为“destroy : true”的属性,以便我可以将其发送到后端以从数据库中删除。
然而,无论出于何种原因,我的道具都被更新,而不是我在方法中使用的变量来完成所有这些。我不确定为什么,因为我没有直接引用 prop,但我确实将其内容复制到方法中的变量中。
updateArray(){
let updatedArray = []
let oldArray = [...this.props.array]
oldArray.forEach(element => {
if(this.componentArray.indexOf(element) > -1){
updatedArray.push(element)
}else{
let newElement = element
newElement.destroy = true
updatedArray.push(newElement)
}
})
return updatedArray
},
为什么会发生这种情况?除了这个,我的组件中的所有其他元素都可以正常工作。
解决方法
是的,您正在将 this.props.array
数组的 元素 复制到方法本地的新数组中,但鉴于数组的元素是对象,两个数组都在最后包含相同对象 (references to the objects)
您可以使用扩展运算符 let newElement = { ...element }
创建原始元素的浅拷贝 - 这将创建全新的对象并复制原始对象的所有属性。但请注意,如果原始对象的任何属性包含数组/对象,则您会遇到同样的问题……仅低一级
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。