Assign Vue instance data to a non reactive variable

Question

I have a form that has a modal that I use to populate an array within the form. Every time the modal is submitted, I push the Vue object into an array that is on the main form. The problem I'm facing is that every item in the array is linked and when I edit one item, all the items in the array get edited.

data: {
  myForm: {
    form_element: null,
    my_array: [],
  },
  modalForm: {
    modalFormElement: null,
  },
},
methods: {
  addRow(){
    this.myForm.my_array.push(this.modalForm);
  },
},

Assigning this.modalForm to a variable first did not work.

You need to clone this.modalForm before you push it to the array so that you are not storing the same object in the array multiple times. Maybe a deep clone. — Decade Moon
– Decade Moon, Commented Aug 16, 2020 at 23:49
@connexo wrong brackets I think. I'd go with {...this.modalForm} — Phil
– Phil, Commented Aug 16, 2020 at 23:49

Tony · Accepted Answer · 2020-08-17 00:10:22Z

4

This is a reference issue. The modalForm object (i.e this.modalForm) references the same place in memory. When you push this.modalForm into the array, changing the value of a property of the object will change the rest. To prevent this issue, copy the modalForm object before pushing it to the array.

data: {
  ...
  modalForm: {
    modalFormElement: null,
  },
},
methods: {
  addRow(){ //
    this.myForm.my_array.push({...this.modalForm}); // shallow clone the object using the es2015 spread syntax
  },
},

The following are other ways to clone objects in JavaScript, but I will stick to the es2015 spread syntax in my example. For more on javascript references for objects, see this

answered Aug 17, 2020 at 0:10

Tony

1,4423 gold badges11 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Assign Vue instance data to a non reactive variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related