Question

默认情况下，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。但是对话框仍然不显示...

Answer 1

您应将箭头功能()=>用作setTimeout回调：

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

参见boussadjra（ Vuetify Dialog example ）的钢笔@boussadjra 在CodePen上。

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

尝试通过在匿名函数中调用此内容来阅读相关问题的answer

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

2 个答案: