Vue JS changing data in one array changes

Question

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?!?!?!

reinarg · Accepted Answer · 2017-08-30 11:48:21Z

2

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

answered Aug 30, 2017 at 11:48

reinarg

4565 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

reinarg Over a year ago

Oh nvm, I didn't see it was an array and not an object, see anchal20 answer for cloning and array.

Jorjini Over a year ago

sorry for my answer, you was right this.currentFullData = cloneArray(this.currentFullData, data); function cloneArray($name, $array) { return $name = JSON.parse(JSON.stringify($array)); } this WOOOOOOOOOOOOOOOOOORKS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! thank YOU!!!!

anchal20 · Accepted Answer · 2017-08-30 11:59:32Z

1

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

answered Aug 30, 2017 at 11:59

anchal20

1911 silver badge5 bronze badges

2 Comments

Jorjini Over a year ago

Uncaught (in promise) TypeError: this.currentFullData.slice is not a function

anchal20 Over a year ago

You can check my codepen codepen.io/anchal20/pen/QMzQQG and also the link I shared above. I hope you are typing it correctly, it should be this.currentFullData.slice() and the resp.data should be of array type.

Collectives™ on Stack Overflow

Vue JS changing data in one array changes

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related