Vue Bootstrap - 當第二個模態打開時隱藏第一個模態

Question

我有這個按鈕：

<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>        

單擊此按鈕時，它會顯示帶有以下代碼的模式：

<b-modal
    id="import-list-type"
    cancel-variant="secondary"
    hide-footer
    centered
    size="lg"
    title="Select Import Type"
>
    <ProjectImportType/>
</b-modal>

在這個模態中，你可以看到我調用了子組件： <ProjectImportType/>

在這個子組件上，我有一個這樣的按鈕：

<b-button variant="primary" v-b-modal.import-xml-modal> Import XML </b-button>

單擊此按鈕時，它將顯示帶有此代碼的另一個模式：

<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>

現在，當第二個模態顯示時，我想隱藏第一個模態。
你能告訴我我該怎么做嗎？

Answer 1

在第一個 modal 上，您可以添加一個 v-if="showImportTypeModal" 指令，並在單擊第二個按鈕時將其設置為 false。 showImportTypeModal 將是一個默認為 false 的數據屬性，並在您單擊第一個按鈕時設置為 true。