[Vuejs]-Custom function changes Vue.js data value as side effect

by

0👍

The problem you are facing here is, that data in vue.js is reactive. So changing data stored anywhere will change the source of the data too.

If you want to change something without facing issues due to reactivity, you need to assign this data without reference as you need. Small example:

// Passing your reactive data
passedData: { propss: "value" },
newData: {}

// Passing data to new property and reactivity
this.newData = this.passedData

this.newData.propss = 'newValue' // this will change passedData.propss to "newValue" too

// Assign Data without reference
this.newData = JSON.parse(JSON.stringify(this.passedData))

If you now change newData it wont affect passedData, as JSON.parse(JSON.stringify(this.passedData)) created a new state without reference to the original.

Note that this should only be a workaround, it isn´t a proper state management.

Leave a comment