Menu
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
307
Vue's reactivity system works by deeply converting plain JavaScript objects into reactive proxies. The deep conversion can be unnecessary or sometimes unwanted when integrating with external state management systems (e.g. if an external solution also uses Proxies).
Vue comes with the reactive method, which is used to create a reactive state in JavaScript or Vue. Basically, the reactive method is just a function that creates a proxy and wraps it around provided data objects, ultimately turning it into a proxied object.
The Vue JavaScript framework is "reactive," which means it can automatically refresh your data. Learn the ways you can take advantage of this in your apps. Modern web applications need to render data dynamically in various HTML elements.
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)))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
