New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs 
How to load and open modal by clicking on button?
Hi,
Hereby the components, my questions are at the end:
Index.vue
<div class="row g-6 g-xl-9">
<template v-for="(el, i) in ["element1", "element2", "element3"]":key="i">
<div class="col-xl-6">
<Widget widget-item="el" :title="`title_${i}`"></Widget>
</div>
</template>
</div>Widget.vue
<template>
<div class="card">
<div class="card-header border-0">
<h3 class="card-title align-items-start flex-column cursor-pointer" data-bs-toggle="collapse" :data-bs-target="`#widget_${widgetItem.id}`"aria-expanded="true"
:aria-controls="`kt_lesson_card_module_card_${widgetItem.id}`">
<span class="card-label fw-bold fs-3 mb-1">{{ title }}</span>
<div class="card-toolbar">
<button type="button"
class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end"
data-kt-menu-flip="top-end" >
<span class="svg-icon svg-icon-2">
<inline-svg src="media/icons/duotune/general/gen024.svg" />
</span>
</button>
<Dropdown :widget-item="widgetItem"></Dropdown>
</div>
</div>
<div>CONTENT</div>
</div>
</template>
</pre
<strong>Dropdown.vue</strong>
<pre>
<template>
<div
class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg-light-primary fw-semobold py-4 w-250px fs-6" data-kt-menu="true">
<div class="menu-item px-5">
<a href="#" data-bs-toggle="modal" data-bs-target="#kt_modal_new"
class="menu-link px-5">NEW MODAL</a>
</div>
<Modal :widget-item="widgetItem"></Modal>
</div>
</template>Modal.vue
<template>
<div class="modal fade" id="kt_modal_new" tabindex="-1"
aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false"
>
<div class="modal-dialog modal-dialog-centered mw-650px">
<div class="modal-content"></div>
</div>
</div>
</template>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')
1. How can I prevent the loading of Modal.vue component for each widget?
2. 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
