I am facing a challenge with vue.js as a beginner. I have an array filled with objects that I send through props to my router-view.
Within one of my router-view components, I am using this array in multiple functions by referencing it with 'this.data' and storing it in a new variable within the functions to avoid overwriting the original prop data.
However, the functions end up overwriting the original prop data and modifying the data of the prop itself.
Here is a simplified example illustrating my question:
App.vue
<template>
<div>
<router-view :data='data'></router-view>
</div>
</template>
<script>
export default {
data: function() {
return {
data: [],
};
},
created: function() {
this.getData();
},
methods: {
getData: function() {
this.data = // array of objects
},
}
Route component:
<script>
export default {
props: {
data: Array,
},
data: function() {
return {
newData1 = [],
newData2 = [],
}
}
created: function() {
this.useData1();
this.useData2();
},
methods: {
useData1: function() {
let localData = this.data;
// manipulate 'localData'
this.newData1 = localData;
}
useData2: function() {
let localData = this.data;
// manipulate 'localData'
this.newData2 = localData;
}
}
}
</script>
The 'localData' in useData2 gets altered due to changes in useData1, leading to unintentional modification of the data prop. How can I prevent this from happening?