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

Posted 2023-02-23

【中文标题】无法在 setTimeout 回调中以编程方式打开 Vuetify 对话框

【英文标题】：Can't open Vuetify dialog programmatically in setTimeout callback

【发布时间】：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。但是对话框仍然没有出现...

【参考方案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