vueJs 更新道具，即使我是方法变量

Question

我有以下方法比较两个数组，一个来自道具，另一个来自我自己的组件。每个存在于我的 props 数组中但不存在于我的组件数组中的元素都被插入到第三个数组中，并添加了名为“destroy : true”的属性这样我就可以将它发送到后端以从数据库中删除.

然而，无论出于何种原因，我的道具正在更新，而不是我在方法中使用的变量来完成这一切。我不太确定为什么，因为我没有直接引用道具，但我确实将其内容复制到方法中的变量中。

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

为什么会发生这种情况？我组件中的所有其他元素都可以正常工作，除了这个。

Answer 1

是的，您正在将 this.props.array 数组的元素复制到方法本地的新数组中，但鉴于数组的元素是对象，两者数组最后包含 same 个对象 (references to the objects)

您可以使用扩展运算符 let newElement = { ...element } 创建原始元素的 浅拷贝 - 这将创建全新的对象并复制原始对象的所有属性。但请注意，如果原始对象的任何属性包含 array/object，您将遇到同样的问题...仅向下一级

vueJs 更新道具，即使我是方法变量

vueJs updating props even though i am method variable

arrays

vue.js

vuetify.js

vue-props