javascript - 使用 Vue 修改数组时出现意外行为

Question

我想保存原始数组并使用表单修改副本(在子 vue 组件中)。但是当副本被修改时，原点也会被修改。

我已经尝试过:

this.updatedDatas = [...this.initialList]
this.updatedDatas = this.initialList.map((x)=> x)
this.updatedDatas = Array.from(this.initialList)

父脚本:

this.initialList = [{name: 'John'}, {name: 'Isa'}]
this.updatedDatas = [...this.initialList]

父模板:

<form-child :item="updatedDatas[1]" />

子模板:

<textarea v-model="item.name"></textarea>

子脚本:

this.$emit('updated', this.item)

Answer 1

您需要对数组进行深层复制，否则您只会得到两个具有相同对象引用的数组。深层复制将重新创建其中对象和数组的内部结构。

您可以使用软件包系列 lodash 或构建您自己的软件包。

外部库将为您提供“无限”的深度，但这将为您提供 2 个级别，这对您来说可能就足够了。

this.updatedDatas = this.initialList.map(i => ({...i});

<小时/>

用于深度复制的其他资源

https://www.npmjs.com/package/clone

http://www.greywyvern.com/?post=363