vue merge two arrays of objects

Question

I have 2 components:

parent component (vue-bootstrap modal with a vue-bootstrap table)
child component (vue-bootstrap modal with a form)

When I submit the form in the child component I want to push the object to the parent table array and that works! But when I reset the form it also resets the object in the table array and I don't know why. I tried push and concat.

parent variable:

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)
      },

result:

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

When I reopen the child modal and I reset the object form with the resetModal method the result is:

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

Why does it reset MA02_E_tb if it's another variable?

maybe this may help you through: stackoverflow.com/questions/31344041/… — gugateider
– gugateider, Commented Oct 7, 2019 at 10:19
your parent variable MA02_E_tb point to form and this is by reference. So if you change form it will also change all variable that are point to it — Mostakim Billah
– Mostakim Billah, Commented Oct 7, 2019 at 10:25
Better you can emit event from child component and update your parent based on event. — Mostakim Billah
– Mostakim Billah, Commented Oct 7, 2019 at 10:27

skirtle · Accepted Answer · 2019-10-07 10:34:46Z

2

First up, you really, really, really shouldn't be using $parent like that. You should be emitting an event instead. But that isn't what's causing the problem.

The actual problem is that you are passing an object by reference. If you then change that object it will be changed in both places. It doesn't matter what name, identifier or path you use to access it, it's still the same object.

Assuming it is a flat object you can make a shallow copy using the spread operator, ...:

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

This will create a new object with the same properties as this.form. It is important to realise that this is only a shallow copy. If this.form contained further reference types (i.e. objects, arrays, etc.) then those may need copying as well.

As an event this would be something like:

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

You'd then need a suitable @submit listener in the parent template to update the array. The idea here is that only the owner of the data should be allowed to modify it and in this case that array is owned by the parent.

edited Oct 7, 2019 at 10:34

answered Oct 7, 2019 at 10:22

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nickb84 Over a year ago

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

Collectives™ on Stack Overflow

vue merge two arrays of objects

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related