javascript - 无法在 setTimeout 回调中以编程方式打开 Vuetify 对话框

Question

默认情况下，Vuetify 对话框的显示由切换 dialog bool 变量值的按钮控制。

我假设以编程方式更改此变量的值将允许显示或隐藏对话框，但事实并非如此。为什么不呢？

这是我的代码:

<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>

控制台在页面加载时显示 false，然后在 2 秒后显示 true。但是对话框还是没有出现...

Answer 1

您应该使用箭头函数 ()=> 作为 setTimeout 回调:

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

看笔 Vuetify Dialog example 通过 boussadjra ( @boussadjra ) 在 CodePen .