Showing modal inside setTimeout doesn't work

[geekyfox90]

Prerequisites

• [ YES] I am running the latest version
• [ YES] I checked the documentation and found no answer
• [ YES] I checked to make sure that this issue has not already been filed
• [ YES] I'm reporting the issue to the correct repository (for multi-repository projects)

Expected Behavior

I'm using a modal as described in the documentation, but when I'm using the following code in order to show the modal, it doesn't work.

    <modal :show="showModal"
           gradient="danger"
           modal-classes="modal-danger modal-dialog-centered">
      <h6 slot="header" class="modal-title" id="modal-title-notification">Your attention is required</h6>

      <div class="py-3 text-center">
        <i class="ni ni-bell-55 ni-3x"></i>
        <h4 class="heading mt-4">You should read this!</h4>
        <p>A small river named Duden flows by their place and supplies it with the
          necessary regelialia.</p>
      </div>
    </modal>

 mounted() {
    setTimeout(function () {
        this.showModal = true
      },3000)
 }

Please describe the behavior you are expecting

The modal should also be show when the variable showModal is updated inside setTimeout

Current Behavior

What is the current behavior?

The modal shows only when showModal is updated outside setTimeout

[cristijora]

Hi @geekyfox90 Thank your for using our products and for posting the issue. Unfortunately the issue is not related to the template itself.

This is a common "problem" if you're using function () anonymous functions instead of arrow functions.

An anonymous function has its own context and respectively this inside the function will be the function context. An arrow function on the other side inherits the parent context and respectively this inside an arrow function will be the parent context, which in our case is the component.

To fix your problem just use

setTimeout(()=> {
    this.showModal = true
 },3000)