Question

我有一个数组，用于填充Dialog Vue组件。我有：

           basicInfo: [{ firstName: "John" , lastName: "Doe" }],

          <basicInfoForm v-model="showBasicInfoForm" :basicInfo="newbasicInfo[0]"></basicInfoForm>

在我的父母身边

       {{basicInfo[0].firstName + ' ' + basicInfo[0].lastName}}

我有一个按钮，它将调用表单组件并打开一个允许编辑的对话框弹出窗口。我的问题是，对对话框的所有更改也会立即显示在父项上。我希望在“子对话框”上有一个“取消”按钮，所以将不会进行任何更改。我在传递数组之前就对其进行了克隆：

       this.newbasicInfo = this.basicInfo.slice();

并在子对话框中

      <v-text-field
      v-model="basicInfo.firstName"
      label="First Name"
      class="input-name styled-input"
       ></v-text-field> 

      props: {
      value: Boolean,
      basicInfo: Array
      },

我的问题是，随着更改的进行，我可以看到每个按键，因此如果选择了取消，则无法返回到原始按键。我是Vue和Components的新手，所以我可能会完全搞砸。为什么要同时对basicInfo数组和newbasicInfo数组进行更改。

Answer 1

这里发生的事情是您要通过引用复制数组。因此，当您修改一个数组的索引时，实际上两个都被修改了，因为它们共享相同的引用。您需要做的是按值复制数组。

可以通过以下方式轻松完成此操作：this.newbasicInfo = JSON.parse(JSON.stringify(this.basicInfo));

您可以在SO上查看此问题以获取更多背景信息：How do you clone an Array of Objects in Javascript?

Answer 2

您的克隆方法不适用于对象数组：

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = basicInfo.slice()

此方法创建一个“浅表副本” -这意味着它可以与数字，字符串等一起使用，但实际上并不会创建对象的克隆。克隆的对象以此方式保留其引用，因此它们实际上将是与源数组中的“相同”对象。

const basicInfo = [{ firstName: "John" , lastName: "Doe" }]
const newbasicInfo = JSON.parse(JSON.stringify(basicInfo))

此方法会创建一个“深层副本” -无论其嵌套有多“深层”，它都将被克隆。

如果您有一个简单值数组，则浅副本会更有效，但是，如果数组中有对象，则需要深副本。

因此，这不是Vue问题，而是更一般的JavaScript问题。

下面是一些片段，以说明不同之处：

const basicInfo1 = [{
  firstName: "John",
  lastName: "Doe"
}]
const newbasicInfo1 = basicInfo1.slice()

newbasicInfo1[0].firstName = "Johnnyboy"
console.log('basicInfo1: ', basicInfo1)
console.log('newbasicInfo1: ', newbasicInfo1)



const basicInfo2 = [{
  firstName: "John",
  lastName: "Doe"
}]
const newbasicInfo2 = JSON.parse(JSON.stringify(basicInfo2))

newbasicInfo2[0].firstName = "Johnnyboy"
console.log('basicInfo2: ', basicInfo2)
console.log('newbasicInfo2: ', newbasicInfo2)

Vue组件的子值更改父值的问题

2 个答案: