奇怪的 Vuejs 道具行为与数组

Question

我创建了一个表单组件，我将一个对象道具传递给它，其中包含字符串和一个对象数组。然后我将道具的元素转移到组件变量，这样我就可以编辑它们而无需直接与道具交互，如下所示：

beforeMount(){
    this.var1 = this.props.var1
    this.var2 = this.props.var2
    this.array = this.props.array
}

当我编辑所有其他变量时，关闭我的组件并再次打开它，除数组外，所有内容都会重置。每次我尝试与它交互时，重置都不会发生。我知道我在代码的任何部分都没有直接与道具进行交互，所以我真的不知道为什么在一切正常时会发生这种情况。要解决这个问题，我必须执行以下操作：

beforeMount(){
        this.var1 = this.props.var1
        this.var2 = this.props.var2
        this.props.array.forEach(element => {
           this.array.push(element)
        })
    }

为什么这会起作用？我也遇到过类似的问题，方法特定变量在函数结束后没有重置，所以我发现这些行为有点奇怪。我也在使用“v-if”并尝试使用组件键来重置组件，但无论出于何种原因，它都不适用于阵列。

Answer 1

尝试像这样复制你的数组：

    this.array = [...this.props.array]

我不确定，但是当您在对象中传递它时，您实际上可能会使用数组作为参考，而不是您想要的值。

奇怪的 Vuejs 道具行为与数组

Weird Vuejs props behavior with arrays

vue.js

vuetify.js