I made a demo to test an issue with my larger project, I am making a settings menu where I want to copy some props, edit them and save them. To do this I need to copy the props for local use. For some reason, the array wont copy properly and a $set will change the array for the parent function. See below.
Child Code below
<script>
export default {
name: "HelloWorld",
props: {
data: Object,
},
data: function(){
return{
localData : {}
}
},
mounted(){
this.localData = Object.assign({},this.data)
},
methods: {
changeData() {
console.log("changing parent data");
console.log(this.localData)
this.localData.name = "new name"
this.$set(this.localData.array, 0, 1000); //change first indes to 1000
},
},
};
</script><template>
<div class="child">
Child {{localData}}
<br />
<button @click="changeData()">Change Data</button>
</div>
</template>Parent Code
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<p>Parent {{data}}</p>
<Child :data="data"/>
</div>
</template>
<script>
import Child from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
Child
},
data: function(){
return {
data: {'name':'hello world','array':[1,2,3,4]}
}
}
}
</script>
As the image shows, after the button is pressed, the name value remains local to the child copy of the object, however the array is not. How can the array be changed locally without the parent changing as well. Thanks
