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

Question

我有一个

v-dialog

，我用它在需要时弹出日期选择器。为了显示它，我用

v-model

绑定了一个值。我使用

click:outside

事件来触发函数，一旦在外部单击，该函数就应该关闭它，这样我就可以再次触发它（如果我单击外部，对话框将被关闭，但值保持为“true”，所以我可以“不要多次显示）。一定是我哪里做错了。

这是我的对话：

<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);
},

这样就可以完美工作了。

Answer 2

我认为您的问题已得到解答，但可能不是您真正想要的。您仅跟踪外部的点击，但可以通过多种方式关闭对话框，例如按 ESC。

我建议这样做

<v-dialog
    v-model="value"
    @update:model-value="$emit('input', false)"
  >

而不是使用外部点击