Vuetify:如何收听对话的关闭事件？
Vuetify:如何收听对话的关闭事件？
提问于 2021-04-01 11:12:07
我认为<v-dialog @close="close">不能工作。
如何监听对话框的关闭事件？
回答 3
Stack Overflow用户
回答已采纳
发布于 2021-04-01 11:27:32
vuetify文档没有为对话框显示任何close事件，也许你可以仔细检查或澄清vuetify版本(如果是这样的话)
无事件的解决方法可以使用watch：
<script>
export default {
data(){
show:false
},
watch:{
show:function(newValue, old){
if(!newValue){
// Closing
}
}
}
}
</script>并使用v-model的对话框：<v-dialog v-model="show">
每当show等于true时，就会显示对话框，并且使用观察器，您将知道何时将show设置为false并关闭对话框。
Stack Overflow用户
发布于 2021-11-16 03:04:59
您可以实现自己的close事件。我的意思是，在你的关闭或保存按钮点击你发出‘关闭’。
<template>
<v-dialog v-model="dialog">
<v-card>
...
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text @click="close"> Close </v-btn>
<v-btn text @click="close"> Save </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: ["dialog"],
methods: {
close() {
this.$emit("close");
},
},
};
</script>Stack Overflow用户
发布于 2021-11-23 12:04:52
为此，您可以实际使用@input event。因为我的激活器按钮在我的组件之外，所以我使用了“激活的”属性来触发对话框，而且由于我们不应该从组件内部改变属性，所以当对话框关闭时，我会发出update:activated事件。
<template>
<v-dialog v-model="dialog" @input="close">
</v-dialog>
</template>
<script>
export default {
data() {
return {
dialog: false
};
},
props: {
activated: {
type: Boolean
}
},
watch: {
activated: {
immediate: true,
handler(newValue) {
if (newValue) {
this.dialog = true;
}
}
}
},
methods: {
close() {
this.$emit('update:activated', false);
}
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66897942
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号