Topic: Show MDBModal programmatically
I try to programmatically launch the MDBModal but it doesn't show up. Any idea ?
Template :
<a class="me-3 text-dark" @click="launchModal()" href="#">Launch Modal</a>
<MDBModal id="modalExemple" tabindex="-1" labelledby="modalExemple" v-model="modalExemple">
<MDBModalHeader>
<MDBModalTitle id="modalExempleLabel" class="text-dark">Exemple</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody class="my-4">
<div class="text-start text-dark">
Exemple
</div>
</MDBModalBody>
Script :
let modalExemple = ref(false);
function launchModal() {
modalExemple = true;
}
Hi, if you want to open the modal, you have to change the modalExample value to true.
You have to change the value property of modalExample ref (vue ref docs) to see any changes. If you are doing this in a template, you don't have to add anything.
I created a snippet where you can see:
openingmodal in a script tag insidelaunchModalmethod andclosingthe modal in a template (without.value)
Best Regards!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Vue
- MDB Version: MDB5 3.2.0
- Device: Macbook Pro
- Browser: Chrome
- OS: Mac OS
- Provided sample code: No
- Provided link: No