Topic: Self-closing modal

imyke priority asked 4 years ago

Expected behavior

I'm trying to create a self-closing MDBVue modal that closes one minute after loading. I'm trying to use the events feature shipped with MDBVue.

Actual behavior

Well, it hasn't worked so far. I've created a modal with a @shown attribute that links to a vue method with a setTimeout.

Resources (screenshots, code snippets etc.)

Here's a snippet of the methods.

enter image description here

Please tell me where I missed it. The modal is meant to be the instructions for an exam app.

imyke priority commented 4 years ago

I just realized that none of the event attributes work. I tried with hide and the same code failed that fired when I injected it in the @click.native directive. So the setTimeout is not the issue, although I still don't know what is.

Magdalena Dembna staff answered 4 years ago

I created a self-closing modal using a watcher, code below:

     <mdb-modal :show="showModal" @close="showModal = false">
          <mdb-modal-title>Modal title</mdb-modal-title>
          <!-- <mdb-btn color="success" @click="showModal2 = true">Show modal 2</mdb-btn> -->
          <mdb-btn color="secondary" @click="showModal = false">Close</mdb-btn>
          <mdb-btn color="primary">Save changes</mdb-btn>

 data() {
    return {
      showModal: false,
  watch: {
    showModal(value) {
      if (value) {
        setTimeout(() => {
          this.showModal = false;
        }, 1000);

Let me know if this approach solves your issue. Kind regards, Magdalena

Please insert min. 20 characters.


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



Specification of the issue

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 6.4.0
  • Device: Desktop
  • Browser: Firefox
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: Yes