EDIT: After some exploration, I've shared the solution I found in case it helps others facing a similar issue.
I'm currently working on building a reusable Bootstrap 5 modal child component within Vue3. The goal is to pass an ID as a prop from the parent component, use Axios for an API call to fetch the necessary data, and display the modal once the data is retrieved. However, I'm experiencing an issue where the modal always loads empty initially (just a blank white box), and I have to close and reopen it to see the loaded information. I'm unsure how to trigger the modal to show up only after the data has fully loaded or load the data seamlessly into the modal without requiring a manual refresh.
Below is the code snippet for ProjectPanel.cs (child) component:
<template>
<div
class="modal fade"
id="projectPanel"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<!-- Modal content here -->
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import ProjectDataService from "@/services/ProjectDataService";
import ProjectDetail from "./Projects/ProjectDetail";
import ResponseData from "./Shared/ResponseData";
import PulseLoader from 'vue-spinner/src/PulseLoader.vue'
export default defineComponent({
name: "ProjectPanel",
props: ["id"],
data() {
return {
projectDetail: {} as ProjectDetail,
imageUrl: "",
isFetching: true,
};
},
components: { PulseLoader },
watch: {
id: {
immediate: true,
async handler(val) {
this.projectDetail = {} as ProjectDetail;
if (val !== "" && val !== undefined) {
await this.RetrieveProject(val as string);
}
},
}
},
methods: {
async RetrieveProject(id: string) {
// Function to retrieve project details
},
}
});
</script>
In the parent component, the child (ProjectPanel) is called using the following syntax:
<ProjectPanel :id="id" />