In my Vue component, I am importing an array named CHART_CARDS. This array is used to set the initial state for another array called chartCards, which can be modified by the user.
import { CHART_CARDS } from '~/constants/chartCards'
...
export default {
data(){
return {
chartCards: []
}
},
async created(){
if (this.$auth.user.settings && this.$auth.user.settings.length) {
this.chartCards = this.$auth.user.settings
} else {
this.chartCards = CHART_CARDS
}
}
}
Essentially, the `chartCards` data property can either take its value from the imported array or from a predefined database table.
The issue arises when I try to reset the `chartCards` variable using a method called reset:
async reset () {
console.log('going to reset. CHART_CARDS looks like:')
console.log(CHART_CARDS)
this.chartCards = CHART_CARDS
await this.updateCards()
console.log('chart cards after updating:')
console.log(this.chartCards)
}
Strangely, updating `chartCards` also seems to affect the values in `CHART_CARDS`. Despite no other parts of the code altering `CHART_CARDS`, both console logs display the same updated array. Why is the value of `CHART_CARDS` changing unexpectedly?