How to run a function every time the modal opens?
Hello!
I'm using Metronic Vue version 8.1.8.
On the page https://preview.keenthemes.com/metronic8/vue/demo7/#/apps/customers/customers-listing, there is a button called "Add Customer". When you click on it, a modal opens with a form.
This modal is located inside the component /src/components/modals/forms/AddCustomerModal.vue.
I would like assistance in understanding how I can configure this component to execute a function every time the modal opens.
What I actually need is to reset the form every time the modal opens.
I tried by adding @click to the button, but since I want to manipulate the form, I believe it needs to be configured within the component itself and based on the event.
Thank you for your attention.
Replies (3)
Hi Fernando,
You can trigger code every time model is open by using bootstrap "show.bs.modal" event.
Just add the following code into your <stronng>/src/components/modals/forms/AddCustomerModal.vue.</a>
onMounted(() => {
if (addCustomerModalRef.value) {
addCustomerModalRef.value.addEventListener(
"show.bs.modal",
function (event: Event) {
console.log(event);
}
);
}
});For more info, please check Bootstrap 5 Modal documentation.
https://getbootstrap.com/docs/5.2/components/modal/
Regards,
Lauris Stepanovs,
Keenthemes Support Team
It worked. Thank you very much.
Hi Fernando,
Glad to hear that. All the best with your project!
Please let us know if you have any further questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
