Show MDBModal programmatically


Topic: Show MDBModal programmatically

digityser pro premium priority asked 2 years 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 2 years 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 inside launchModal method and
  • closing the modal in a template (without .value)

Best Regards!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags