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 modal I need to 'duplicate' the object to another.

This works:

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

// New object                // API object

The issue now is that I DON'T want the team.services object to be bound to and update when I update the servicesForm.services object.

How do I do that?

Lovelock · Accepted Answer · 2017-07-05 11:35:49Z

9

Quickly found my answer:

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

answered Jul 5, 2017 at 11:35

Lovelock

8,17519 gold badges97 silver badges195 bronze badges

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

Comments

Antony · Accepted Answer · 2017-07-05 11:58:24Z

3

An ES6 solution would be to use Object.assign:

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

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

answered Jul 5, 2017 at 11:58

Antony

1,27311 silver badges19 bronze badges