custom function changes Vue.js data value as side effect

Question

I have a function inside the methods property which takes passedData value from the data() method, does some changes to the object and stores the new value in a constant

this somehow causes a side effect which changes the passedData value also. What is the cause and how can I prevent that ?

this.passedData: -->

{"propss":"value"}
App.vue?3dfd:61 {"propss":"propss : value"}
App.vue?3dfd:49 {"propss":"propss : value"}
App.vue?3dfd:61 {"propss":"propss : propss : value"}

new Vue({
  el: "#app",
  
 

  data() {
    return {
      passedData: { propss: "value" },
    };
  },

  methods: {
    displayData() {
      console.log(JSON.stringify(this.passedData));
      
       const root = d3.hierarchy(this.passedData, function(d) {
    if(typeof d == "object")
     return Object.keys(d).filter(d=>d!="$name").map(k=>{
       if(typeof d[k] == "object") d[k].$name = k;
       else d[k] = k + " : " + d[k];
       return d[k];
     }); 
    
  })
      
       console.log(JSON.stringify(this.passedData));
      
    },
  },
  
  
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <button type="button" @click="displayData">display</button>

 
</div>

You're mutating it, `d[k].$name = k`. – Estus Flask Oct 07 '21 at 07:13 — Estus Flask, Oct 07 '21 at 07:13

score 0 · Answer 1 · answered Oct 07 '21 at 08:01

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.

custom function changes Vue.js data value as side effect

1 Answers1