从Vue组件中的数组prop初始化数组数据

Question

在Vue组件中，我有一个名为selectedSuppliers的（对象）数组。我想将名为suppliers的数据属性初始化为selectedSuppliers，但是随后对suppliers所做的任何更改都应该不传播给selectedSuppliers。

我尝试了以下

props: {
  selectedSuppliers: {
    type: Array,
    required: true
  },
},
data () {
  return {
    selected: [...this.selectedSuppliers],
  }
}

但是它不起作用。将数组数据属性初始化为数组prop的正确方法是什么？

Answer 1

如果selectedSuppliers是对象数组，则散布运算符仅执行此数组的浅表副本。这意味着更新suppliers的任何对象 将更新selectedSuppliers的内容。

您可以看看this short post。

Answer 2

这可能有效，

props: {
  selectedSuppliers: {
    type: Array,
    required: true
  },
},
data () {
  return {
    selected: this.selectedSuppliers.map(o => Object.assign({}, o)
  }
}