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>
</h3>
<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?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

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.

<a href="#" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#your_modal_id">Open Modal</a>

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(