CODEWITHSUNDEEP
javascriptvue.js
Jorjini
Jorjini

Reputation: 25

Vue JS changing data in one array changes

i can't understand what the ... want this vue! please help if you can! this is my code

var groupadding = new Vue({
el: '#groupAdd',
data:{
     currentFullData: [],
     localData: []
   },
   methods: {
     getDepartment() {
       var sendData = id; // this is example
       this.$http.post('some api ', sendData, {emulateJSON: true})
       .then( resp => {
         this.currentFullData = resp.data;    
       }
     },
     getLocalDepartment() {
     this.localData = this.currentFullData;
     }
   }
})

in currentFullData for example i have 4 boolean field, 'create' , 'read', 'update', 'delete'

this 4 fields gets localData too, but when i change in localData some of them, they changes in currentFullData too!!!!!!!!!!!!!!!

soooooo anyone can explain me wtf is this?!?!?!

Upvotes: 2

Views: 917

Answers (2)

anchal20
anchal20

Reputation: 191

Thanks for the question. The issue is not with vue and the data values 'currentFullData' and 'localData'. As your data variables are Arrays, therefore when you assign the value like this this.localData = this.currentFullData then this.localData is a pointer to this.currentFullData. So, when you change localData then currentFullData also changes. Thus, to avoid this, pass a reference of this.currentFullData to this.localData like this this.localData = this.currentFullData.slice()

For more understanding you can refer this question about arrays on stackoverflow

Upvotes: 1

reinarg
reinarg

Reputation: 456

This is because you are actually modifying the same object (as you wrote this.localData = this.currentFullData;)

If you want to initialize this.localData using currentFullData, you need to copy it :

this.localData = Object.assign({}, this.currentFullData);

see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Upvotes: 2

Related Questions