Lazy load modal vue
Hi, I'm using metronic vue version 8.1.1
In demo1, the example code to open modal:
Current Status: When accessing the customers list page, it also initializes the AddCustomerModal component
Expected: Lazy load AddCustomerModal (When I click "Add Customer" button, AddCustomerModal component is initialized)
Thanks for your help!
In demo1, the example code to open modal:
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#kt_modal_add_customer"
>
<span class="svg-icon svg-icon-2">
<inline-svg src="media/icons/duotune/arrows/arr075.svg" />
</span>
Add Customer
</button>
...
<AddCustomerModal></AddCustomerModal>Current Status: When accessing the customers list page, it also initializes the AddCustomerModal component
Expected: Lazy load AddCustomerModal (When I click "Add Customer" button, AddCustomerModal component is initialized)
Thanks for your help!
Replies (5)
Can anyone help me please
Hi Reply No,
what is your purpose of your expeced behaviour? Modal is not visible until you open it.
Then you can push some data to it...
what is your purpose of your expeced behaviour? Modal is not visible until you open it.
Then you can push some data to it...
1. what is your purpose of your expeced behaviour => I want to lazy load modal, pass data when I open modal
2. Modal is not visible until you open it
I have used onMounted() in AddCustomerModal component.
When accessing the customers list page, it's also print 111 in console
2. Modal is not visible until you open it
I have used onMounted() in AddCustomerModal component.
onMounted(() => {
console.log(111);
})When accessing the customers list page, it's also print 111 in console
Instead of doing your logic in the onMounted function, you can move it to bootstrap modal show event.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
onMounted(() => {
const myModal = document.getElementById("kt_modal_add_customer");
myModal?.addEventListener("shown.bs.modal", function () {
console.log("modal shown");
});
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
You can achieve a lazy load of the modal component using Vue defineAsyncComponent function.
For more info check out vue official doc: https://vuejs.org/guide/components/async.html
Regards,
Lauris Stepanovs,
Keenthemes Support Team
You can achieve a lazy load of the modal component using Vue defineAsyncComponent function.
import { defineAsyncComponent } from "vue"
const AsyncComp = defineAsyncComponent(() =>
import("./components/MyComponent.vue")
)For more info check out vue official doc: https://vuejs.org/guide/components/async.html
Regards,
Lauris Stepanovs,
Keenthemes Support Team
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
