关闭引导模式后重置它

Question

我在我的 vue 应用程序中使用了 bootstrap 模态，在模态内部有输入字段，当我输入数据然后提交数据并在重新打开它后关闭模态时，所有以前的输入仍然存在，但我想重置所有提交或关闭模式后的输入字段。 这是我的模式：

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

其他问题是，当我打开一个模式并在该模式上有一个打开另一个模式的按钮时，当另一个模式打开时，应用程序会冻结，并且我无法滚动该模式。 这就是我从另一个模式打开一个模式的方法：

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

完全重置由 Vue 组件组成的“表单”（不是 HTML 表单）的最简单方法是将 v-if 放在顶级组件上（在您的情况下为 AppModal）。

将该值从 false 开始，在打开之前将其设置为 true，完成后将其设置回 false。

这可确保每次打开时所有组件都重置回完全相同的组件状态。