How to load and open modal by clicking on button?
Hi,
Hereby the components, my questions are at the end: Index.vue
Widget.vue
{{ title }}
CONTENT
Dropdown.vue
Modal.vue
My problem and questions I am fetching the element in index page from backend and reinitializeComponents(): But the modal is also loaded for each component. How can I load the component only when it's needed, e.g. by clicking on a button?
I have also created a function for click
const newModal = () => {
const myModal = new Modal(document.getElementById("kt_modal_new"));
myModal.show();};
But when I click on the button, I'm getting
Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
- How can I prevent the loading of Modal.vue component for each widget?
- How can I open the Modal.vue component via a button?
Replies (2)
I had to dig it out of their CalendarApp1.vue today and thought I share:
import { Modal } from "bootstrap";
const modal = new Modal(document.getElementById("kt_modal_add_event"));
modal.show();
Hi,
You can move the modal component from the Widget.vue to the layout level, and then toggle this modal using the button below. Just update data-bs-target attribute with your modal id.
Open ModalRegards,
Lauris Stepanovs,
Keenthemes Support Team
