Vue.js - don't bind an object when copying it to another data attribute

Question

I have an object coming from my API and when loading a modality I need to "duplicate" the object to another.

It works:

this.servicesForm.services = this.team.services;

// New object                // API object

Now the problem is that I do NOT want the team.services object to bind and update when the servicesForm.services object is updated.

How to do it?

+3

Lovelock 05 jul. 17 at 11:34 am

2 answers

Lovelock · Answer 1 · 2017-07-05T11:35:49+0000

Found my answer quickly:

this.servicesForm.services = JSON.parse(JSON.stringify(this.team.services));

Antony · Answer 2 · 2017-07-05T11:58:24+0000

ES6 solution is for using Object.assign:

this.servicesForm.services = Object.assign({}, this.team.services);

Note that this is only a shallow copy, if you want a deep copy you will need to apply this method recursively.