Topic: Show MDBModal programmatically
digityser priority asked 1 year ago
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;
}
Bartosz Cylwik staff answered 1 year ago
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:
opening
modal in a script tag insidelaunchModal
method andclosing
the 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
- ForumUser: Priority
- 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