Could someone please help me understand what's going on in these snippets of code and how I can resolve it?
I am fetching data in the parent component's mounted function and updating its data. As a result, the child component receives the new object. However, the property value of this object turns out to be empty!
Parent Component:
<template>
<div class="main-page">
<main-content v-bind:config="mainContentConfig" />
</div>
</template>
mounted(){
fetchData().then(editions => { editions.sort((e1, e2) => e1.name.toLowerCase().localeCompare(e2.name.toLowerCase()))
this.mainContentConfig.intranetEditions = [...editions];
this.mainContentConfig.currentMenuIndex = 1;
});
}
Child Component:
mounted(){
console.log("AA==============>", this.config);
console.log("BB==============>", this.config.intranetEditions);
}
However, the output on the console shows an empty array for this.config.intranetEditions.
I encountered this issue when trying to fill other data in the child component using the this.config.intranetEditions array, which always remains empty.
Edit: I also attempted the following code, but it did not make any difference.
[...this.config.intranetEditions]
Edit 2: I even tested this code, but still no luck.
console.log("AA==============>", this.config);
console.log("BB==============>", JSON.stringify(this.config.intranetEditions));