Question

我有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？

Answer 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侦听器来更新数组。这里的想法是，仅应允许数据的所有者修改数据，在这种情况下，数组是由父级拥有的。

Vue合并两个对象数组

1 个答案: