在Vue模式中将数组作为道具传递

Question

我想在vueJs中将数组从一个组件传递到另一个组件，我可以这样做

<add-new-admin-modal
 :permissions = "permissions"
</add-new-admin-modal>

在我的其他组件中，实际上是一个模态，我收到道具，

props: {
  permissions: {
    type: Array,
    default: () => []
  }
}

在这里，当我尝试更改权限数组时，它反映了父数据，如文档中所述。

所以我尝试使用传播运营商

data () {
 return {
  statePermissions: [...this.permissions]
 }
}

当我尝试上面的方法时，statePermissions数组仍为空，

我甚至尝试过Object.assign

data () {
 return {
  statePermissions: Object.assign([], this.permissions)
 }
}

它仍然无效。

在我的模态中，我正在访问它

<div v-for = "permission in statePermissions" :key = "permission.id">
 ...someHtml here.
</div>

主要的想法是，我有一个通过api获取数据的组件，然后我有一个模态，它接收这些数据并相应地更新它并将其提交给api。当模态关闭时，父组件应该需要有未编辑的数据，这样如果重新打开模态，它应该得到未编辑的数据。

在使用Modal的过程中，我的父组件保持相同的状态（既不会挂载也不会更改），因此从父级再次请求默认数据是没有意义的。

Answer 1

您的问题可能是您的prop的默认值是一个空数组，并且在父项正确填充属性之前将其分配给局部变量（或者甚至可能是生命周期问题）。

尝试将你的任务移动到局部变量到mounted()钩子，或者如果你不想成为你的财产的反应性watch，那就更好了：

watch: {
  permissions(newValue) {
    this.statePermissions = newValue
  }
}

您也不需要将...spread数组分配给数组。

Answer 2

由于permissions是一个对象数组，因此当您复制它时，生成的数组是浅复制，这意味着它将包含对对象的相同引用。这就是为什么修改新数组的值也会更新旧数组的值。您需要在permissions中创建对象的副本。

如果permissions只包含基元，你可以这样做：

this.statePermissions = JSON.parse(JSON.stringify(this.permissions));

如果permissions是某种类型（即new Permission()），你可以映射它（我认为这更清洁）：

this.statePermissions = this.permissions.map(x => new Permission(x.propA, x.propB, etc.));

这样，statePermissions中的每个克隆对象都将具有与它在permissions中复制的对象相同的属性，但它是独立的，因此修改不会影响从中创建它的父级。