[英]Can't open Vuetify dialog programmatically in setTimeout callback
By default, the displaying of Vuetify
dialog is controlled by a button toggling the value of dialog
Boolean variable.默认情况下,
Vuetify
对话框的显示由切换dialog
布尔变量值的按钮控制。
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.控制台显示
false
页面加载,那么true
2秒后。 But dialog still doesn't show up...但是对话框仍然没有出现......
You should use arrow function ()=>
as setTimeout
callback :您应该使用箭头函数
()=>
作为setTimeout
回调:
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 .
you're having some trouble calling the variable inside the function of the setTimeout.您在调用 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尝试从相关问题中阅读此答案,并在匿名函数中调用它
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.