In my Vue app, I am utilizing the UIKit modal.
UIkit.modal(element).show(); // This adds the class uk-open and sets style to display:block
UIkit.modal(element).hide();
When I hide the modal, it simply removes the class uk-open and the inline style of display:block. I have observed that even after the parent component of the modal is destroyed, the modal element remains in the DOM. Additionally, upon calling the show method, the modal element is moved to the bottom of the body just before the closing body tag. Initially, on first load, it would be positioned where it was declared within the component. Could this relocation be the reason why it goes unseen and subsequently not removed? The issue arises when navigating to a different component and then returning to open the component with the modal as a child component, triggering the show method again. This results in multiple instances of the modal elements accumulating in the DOM without being removed.
To address this, one workaround I attempted involved incorporating a condition to add the element to the DOM and trigger the show only if the condition evaluates to true.
<field-form-modal
v-if="showModal"
.....
/>
watch: {
showModal(show) {
if (show) {
UIkit.modal('#field-form-modal').show();
}
}
},
However, at the point when reaching UIkit.modal('#form-field-modal').show();, the element has not yet been added to the DOM. Consequently, an error occurs - Cannot read property 'show' of undefined. It seems like my assumption is accurate, as the element is only added after the showModal watch function executes.
If you have any suggestions on how to resolve this issue, I would greatly appreciate it! Thank you!