Within my parent component, I am connecting to the backend using a query. Through interactions with the navbar and utilizing my activeView data in the parent component, I trigger the rendering of a new child page upon clicks and pass a prop from the response by employing v-if in vue. Strangely, one of the functions within this process is causing a change not only in the prop in the parent component but also altering my response. How is this possible?
beforeMount() {
console.log(this.plansPropOrg);
this.plansProp = this.plansPropOrg;
this.tempPlan = this.plansProp.currentPlan;
console.log(this.plansProp);
this.propsToData();
}
The function at fault here seems to be propsToData - when I comment it out, everything behaves as expected, but I need to include it.
Now let's look at how my parent component behaves when making the query:
await axios.post("xxxxx/yyyyyyy").then(res => {
console.log("heyyo");
console.log(res);
this.plansData = res.data.data;
console.log(this.plansData);
});
In the propsToData method, a simple task is performed - translating boolean values into English. However, when the condition is true in the response, I notice that the values are being displayed as translations.
propsToData() {
//TODO: Change the 'if' statement to 'ifsubscriber'
console.log("AAA");
console.log(this.plansProp);
if (this.plansProp.isSubscriber) {
console.log("BBBBB");
this.plansProp.currentPlan.analytics
? (this.plansProp.currentPlan.analytics = this.$t(
"settings.plans.active"
))
: (this.plansProp.currentPlan.analytics = this.$t(
"settings.plans.inactive"
));
}
}
This unexpected behavior is leaving me puzzled - how is it possible for it to alter the original response?