I have a button in my application that triggers a modal when clicked. The button code is as follows:
<b-button variant="success" v-b-modal.import-list-type>
<feather-icon
icon="DownloadCloudIcon"
class="mr-50"
/>
<span class="align-middle">Import</span>
</b-button>
Upon clicking this button, a modal with the following code is displayed:
<b-modal
id="import-list-type"
cancel-variant="secondary"
hide-footer
centered
size="lg"
title="Select Import Type"
>
<ProjectImportType/>
</b-modal>
The child component called <ProjectImportType/> is visible within this modal.
Within the child component, there is another button coded like this:
<b-button variant="primary" v-b-modal.import-xml-modal> Import XML </b-button>
Clicking this button triggers yet another modal to appear with the following code:
<b-modal
id="import-xml-modal"
cancel-variant="secondary"
hide-footer
centered
size="xl"
title="New Import"
@shown="handleImportTypeModal"
>
<template #modal-header="">
<b-img
:src="require('@/assets/images/projects/xml.png')"
width="34"
alt="New Import"
/>
<h5 class="mr-auto ml-2 mt-2" vertical-align="bottom">New Import</h5>
</template>
<ProjectImportNew/>
</b-modal>
While the second modal is displayed, I would like to hide the first one. Can you please provide guidance on how I can achieve this?