vue合并两个对象数组答案

【问题标题】：vue merge two arrays of objectsvue合并两个对象数组
【发布时间】：2020-02-04 15:06:15
【问题描述】：

我有 2 个组件：

父组件（带有 vue-bootstrap 表的 vue-bootstrap 模式）
子组件（带有表单的 vue-bootstrap 模态）

当我在子组件中提交表单时，我想将对象推送到父表数组，这样就可以了！但是当我重置表单时，它也会重置表数组中的对象，我不知道为什么。我试过push 和concat。

父变量：

MA02_E_tb // table array [{descr_forn: '',fornitore:'',n_oda:''},{descr_forn: '',fornitore:'',n_oda:''}]

 data() {
      return {
        form: {
          descr_forn: 'prova',
          fornitore:'prova',
          n_oda:'prova',
      }
    },
  methods: {
      resetModal() {
        this.form.descr_forn = '',
        this.form.fornitore = '',
        this.form.n_oda = '',
      },
      onSubmit: function(evt) {
        evt.preventDefault()
        this.$parent.MA02_E_tb = this.$parent.MA02_E_tb.concat(this.form)
      },

结果：

MA02_E_tb = [{descr_forn: 'prova',fornitore:'prova',n_oda:'prova'}]

当我重新打开子模式并使用 resetModal 方法重置对象表单时，结果是：

MA02_E_tb = [{descr_forn: '',fornitore:'',n_oda:''}]
form = [{descr_forn: '',fornitore:'',n_oda:''}]

如果MA02_E_tb 是另一个变量，为什么要重置它？

【问题讨论】：

也许这可以帮助你完成：stackoverflow.com/questions/31344041/…
您的父变量MA02_E_tb 指向form，这是通过引用。因此，如果您更改表单，它也会更改指向它的所有变量
您可以更好地从子组件发出事件并根据事件更新您的父组件。

标签： javascript vue.js

【解决方案1】：

首先，你真的，真的，真的不应该那样使用$parent。您应该改为发出事件。但这不是造成问题的原因。

实际问题是您通过引用传递对象。如果您随后更改该对象，它将在两个地方都发生更改。无论您使用什么名称、标识符或路径来访问它，它仍然是同一个对象。

假设它是一个平面对象，您可以使用扩展运算符进行浅拷贝，...：

this.$parent.MA02_E_tb = this.$parent.MA02_E_tb.concat({...this.form})

这将创建一个与this.form 具有相同属性的新对象。重要的是要意识到这只是一个浅拷贝。如果this.form 包含更多引用类型（即对象、数组等），那么这些可能也需要复制。

作为一个事件，这将是这样的：

this.$emit('submit', {...this.form})

然后，您需要在父模板中使用合适的 @submit 侦听器来更新数组。这里的想法是只允许数据的所有者修改它，在这种情况下，该数组归父级所有。

【讨论】：

使用 this.$emit('submit', {...this.form}) 完美工作