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

【问题标题】：Can't open Vuetify dialog programmatically in setTimeout callback无法在 setTimeout 回调中以编程方式打开 Vuetify 对话框
【发布时间】：2020-01-03 03:00:04
【问题描述】：

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

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

这是我的代码：

<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。但是对话框仍然没有出现...

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

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

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

看笔 Vuetify Dialog example by boussadjra (@boussadjra) 在CodePen。

【讨论】：

【解决方案2】：

您在调用 setTimeout 函数内的变量时遇到了一些问题。

试试这个：

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

尝试从与在匿名函数中调用 this 相关的问题中阅读此 answer

【讨论】：