Can't open Vuetify dialog programmatically in setTimeout callback

Question

By default, the displaying of Vuetify dialog is controlled by a button toggling the value of dialog Boolean variable.

I was assuming that programmatically changing the value of this variable would allow to show or hide the dialog, but it doesn't. Why not?

Here's my code:

<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>
        Dialog content
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dialog: false
    }
  },
  mounted() {
    console.log(this.dialog);
    setTimeout(function() {
      this.dialog = true;
      console.log(this.dialog);
    }, 2000);
  }
}
</script>

Console shows false on page load, then true after 2 seconds. But dialog still doesn't show up...

Answer 1

you're having some trouble calling the variable inside the function of the setTimeout.

try this:

<template>
  <div>
    <v-dialog v-model="dialog">
      <v-card>
        Dialog content
      </v-card>
    </v-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      dialog: false
    }
  },
  mounted() {
    that = this
    console.log(this.dialog);
    setTimeout(function() {
      that.dialog = true;
      console.log(that.dialog);
    }, 2000);
  }
}
</script>

try to read this answer from a related issue with calling this inside anonymous functions

Answer 2

You should use arrow function ()=> as setTimeout callback :

  mounted() {
    console.log(this.dialog);
    setTimeout(()=> {
      this.dialog = true;
      console.log(this.dialog);
    }, 2000);
  }

See the Pen Vuetify Dialog example by boussadjra (@boussadjra) on CodePen.