正确使用 click:outside 和 vuetify 对话框

Question

我有一个 v-dialog，可以在需要时弹出日期选择器。为了展示它，我用 v-model 绑定了一个值。我使用 click:outside 事件触发应该在外部单击后关闭它的功能，以便我可以再次触发它（如果我在外部单击，对话框将被关闭，但值保持为“真”，所以我可以“ 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 事件的方式使用它

Answer 1

问题出在我的 closeDialog 函数中。 this.value = false 没有通知父组件值的变化。所以我必须把它改成这个才能正常工作：

closeDialog() {
  this.$emit('input', false);
},

这样就完美了。