CODEWITHSUNDEEP
laravelvue.js
PttRulez
PttRulez

Reputation: 175

How can I avoid reactivity in vue

I'm assigning an object from property 'model' (which i get from blade attribute model in Laravel) to data attribute model. Later data attribute model changes since it's binded to form input field. But prop 'model' also changes. They are the same object. How can I avoid that behavior? I need property 'model' to stay as it was when mounted. I tried this in created() method and in data():

 Vue.set(this, 'model', this.transferredData.model);

That didn't help

Upvotes: 5

Views: 216

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115232

You can use spread syntax to create a new object so it will mutate the newly created object only.

Vue.set(this, 'model', {...this.transferredData.model});
// or Vue.set(this, 'model', Object.assign({}, this.transferredData.model));

NOTE: If it is nested then you have to deconstruct recursively or you can use:

Vue.set(this, 'model',JSON.parse(JSON.stringify(this.transferredData.model)))

Upvotes: 6

Related Questions