After examining the code below, I noticed that the alerts in my child component trigger before any of the code in the Parent's mounted function runs.
As a result, it seems like the child component has already completed initialization before the data is ready, causing it not to display the data until a reload occurs.
Although the data itself returns successfully from the API and is displayed as raw JSON inside the v-card in the layout.
My main concern is how can I ensure that the data requested in the Parent is ready BEFORE the child component is loaded? Most solutions I found focus on passing static data using props, but this approach fails when the data needs to be fetched first.
Within the mounted() function of the Parent, I have the following code to fetch the data:
const promisesArray = [this.loadPrivate(), this.loadPublic()]
await Promise.all(promisesArray).then(() => {
console.log('DATA ...') // logs after the log in Notes component
this.checkAttendanceForPreviousTwoWeeks().then(()=> {
this.getCurrentParticipants().then((results) => {
this.currentP = results
this.notesArr = this.notes // see getter below
})
The getter method that retrieves the data in the parent component:
get notes() {
const newNotes = eventsModule.getNotes
return newNotes
}
The rendering of the component in the parent template:
<v-card light elevation="">
{{ notes }} // Raw JSON displays correctly here
<Notes v-if="notes.length" :notesArr="notes"/>
</v-card>
The Child component:
...
@Prop({ type: Array, required: true })
notesArr!: object[]
constructor()
{
super();
alert(`Notes : ${this.notesArr}`) // no data here
this.getNotes(this.notesArr)
}
async getNotes(eventNotes){
alert(`Notes.getNotes CALL.. ${eventNotes}`) // eventNotes = undefined
this.eventChanges = await eventNotes.map(note => {
return {
eventInfo: {
name: note.name,
group: note.groupNo || null,
date: note.displayDate,
},
note: note.noteToPresenter
}
})
}
...
As someone who is still learning Vue, I may be overlooking something simple. I have been trying to resolve this issue for a few days now without success, so any assistance would be greatly appreciated!