Level 1
You can try:
this.oldForm = JSON.parse(JSON.stringify(this.form));
This is what I am using for my applications to remove the "reactiveness".
6 likes
Apr 26, 2018
7
Level 10
Creating non reactive copies of vue data
I want to have the ability to allow users to cancel a form change and revert back to the original form data. Whenever i assign old Data to the existing data i.e.
this.oldForm = this.form
the oldForm stays reactive to changes that occur in this.form. So if the user changes this.form.... this.oldForm is also updated.
is there a way to copy the original form data so it wont be reactive?
Level 1
@sikhlana genius
Level 3
PHP and Javascript objects are both assigned by reference.
In PHP, to create a new object, you would clone it.
$this->oldForm = clone $this->form
In Javascript, you can use the Object.assign call.
this.oldForm = Object.assign({}, this.form);
This will take your newly created object ({}) and assign all the values from this.form to it.
Note: sikhlana's solution is a good workaround when you need to deep copy an object (an object of objects).
Level 3
Or just Object.assign(this.oldForm, this.form). Or this.oldForm = {...this.form}.
Level 47
I like to use Object.assign() as mentioned above, or if you use a library such as lodash, you can use _.clone(obj) or _.cloneDeep(obj).
3 likes
Level 2
@SIKHLANA - Of all the other responses, this is the only one that actually worked for me.
Level 47
why not simply reset everything by refresh the page?
Please or to participate in this conversation.