Resetting bootstrap modal after closing it

Question

I have used bootstrap modal in my vue application, Inside the modal i have input fields and when I enter the data then submit the data and close the modal after reopening it all the previous inputs are still there, but I want to reset all the input fields once I submit or close the modal. This is my modal:

<template>
    <AppModal modal-size="modal-xl" id="add_issue_solution_modal">
        <template #header>

            <h5 class="modal-title">
                {{ Lang.get('Maintenance Issues') }}
            </h5>
            <AppButton type="close" class=" btnCloseModal" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </AppButton>
        </template>
        <template #default>
            <div class="pt-4 px-2 py-2">
                <form id="frm-update" @submit.prevent="saveSolution">
                    <div class="row">
                        <div  class="col-md-12">
                            <AppFieldset :legendText="Lang.get('lang.Master')" :legendClass="legendClass">


                                <div class="col-md-6" style="width:500px">
                                    <FormLabel>{{ Lang.get('lang.Hospital Name') }}</FormLabel>
                                    <FormInput v-model="formData.hospital_id" readonly/>
                                    <InputError name="hospital_name"/>
                                </div>
                                <div class="col-md-3" style="width:500px">
                                    <FormLabel>{{ Lang.get('lang.Machine Name') }}</FormLabel>
                                    <FormInput v-model="formData.machine_id" readonly/>
                                    <InputError name="year"/>
                                </div>
                                <div class="col-md-3" style="width:500px">
                                    <FormLabel>{{ Lang.get('lang.Serial No') }}</FormLabel>
                                    <FormInput v-model="formData.serialNo" readonly/>
                                    <InputError name="month"/>
                                </div>
                            </AppFieldset>
                        </div>

                    </div>
         </form>
            </div>
        </template>
        <template #footer>
            <button type="reset" form="frm-store" class="btn btn-default btnCloseModal" data-bs-dismiss="modal">{{ Lang.get('Close') }}</button>

            <AppButton btn-type="submit" form="frm-update" :disabled="formProcessing" >
                {{ Lang.get('Save Changes') }}
            </AppButton>
        </template>
    </AppModal>
</template>

Other Issue is when I open a modal and have a button on that modal that opens another modal, when another modal is open the app freezes and I can not scroll through that modal. This is how I open one modal from another modal:

const assignObsolescenceDetailIssues = document.getElementById('assign_obsolescence_detail_issues_modal');
    const getObsolescenceDetailIssues = document.getElementById('get_detail_issues_modal');

    assignObsolescenceDetailIssues.addEventListener('hidden.bs.modal', event => {
        if (assignObsolescenceDetailIssues.classList.contains('hidden') && getObsolescenceDetailIssues.classList.contains('hidden')) {
            const getReceiptDetailModal = new bootstrap.Modal(document.getElementById('get_detail_issues_modal'));
            getReceiptDetailModal.show();
        }
    });
````

Answer 1

The easiest way to totally reset a “form” (not an HTML form) composed of Vue components is to put a v-if on the top level component (AppModal in your case).

Start the value at false, set it to true right before you open it and set it back to false after you are done and have closed it.

This ensures that all of the components are reset back to the exact same initial component state every time it is opened.