如何解决正确使用click:out with vuetify对话框
我有一个v对话框,可以在需要时用来弹出日期选择器。为了显示它,我用v-modle绑定了一个值。我使用click:outside事件来触发应该在外部单击后将其关闭的功能,因此我可以再次触发它(如果在外部单击,则关闭该对话框,但该值保持为'true',因此我可以' t不止一次显示)。一定是我做错了。
这是我的对话框:
<template>
<v-dialog
v-model="value"
@click:outside="closeDialog"
>
<v-date-picker
v-model="date"
/>
<v-divider/>
<div>fermer</div>
</v-dialog>
</template>
<script>
export default {
name: 'DatePickerDialog',props: ['value'],data() {
return {
colors,date: null,}
},methods: {
closeDialog() {
this.value = false;
}
}
}
</script>
调用它就是这样简单:
<template>
<div>
<v-btn @click="inflateDatePicker">inflate date picker</v-btn>
<date-picker-dialog v-model="showDatePicker"/>
</div>
</template>
<script>
import DatePickerDialog from '../../../../views/components/DatePickerDialog';
export default{
name: "SimpleTest",components: {
DatePickerDialog
},data() {
return {
showDatePicker: false,};
},methods:{
inflateDatePicker() {
this.showDatePicker = true;
},},}
</script>
所以我可以毫无问题地给它充气。然后,尽管我不能进入closeDialog()(已通过调试并尝试记录内容进行了验证)。那么发生了什么而使我无法进入该功能呢?文档没有指定您是否需要与常规@click事件不同地使用它
解决方法
问题出在我的closeDialog函数中。 this.value = false不会将值更改通知父组件。因此,为了使其正常工作,我不得不将其更改为此:
closeDialog() {
this.$emit('input',false);
},
使用此功能非常好。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。