I have a v-dialog that I use to pop up a date picker when needed. To show it, I bind a value with v-model. I use the click:outside events to trigger the function that is supposed to close it once it's clicked outside so I can trigger it again (if I click outside, the dialog is dismissed, but the value stays 'true', so I can't show it more than once). There must be something I'm doing wrong.

Here's my dialog :

<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>

And what calls it is as simple as this:

<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>

So I can inflate it with no problem. Then though I'm not able to go inside closeDialog() (verified by debugging and trying to log stuff). So what is happening that makes it so I'm not able to enter the function? Documentation doesn't specify if you need to use it differently from regular @click events.

I have a v-dialog that I use to pop up a date picker when needed. To show it, I bind a value with v-model. I use the click:outside events to trigger the function that is supposed to close it once it's clicked outside so I can trigger it again (if I click outside, the dialog is dismissed, but the value stays 'true', so I can't show it more than once). There must be something I'm doing wrong.

Here's my dialog :

<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>

And what calls it is as simple as this:

<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>

So I can inflate it with no problem. Then though I'm not able to go inside closeDialog() (verified by debugging and trying to log stuff). So what is happening that makes it so I'm not able to enter the function? Documentation doesn't specify if you need to use it differently from regular @click events.

• javascript
• vuejs2
• vuetify.js

• 3 You are updating a prop directly which is not recommended by Vue. Alternatively, on your click event closeDialog, you can emit event to parent and set showDatePicker to false there. – nizantz Commented Aug 22, 2020 at 8:49
• Exactly what I found out! – UmbrellaCorpAgent Commented Aug 22, 2020 at 19:13

2 Answers 2

The problem was in my closeDialog function. this.value = false did not notify the parent component of the value change. So I had to change it to this in order for it to work properly :

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

With this is works perfectly fine.

I think that your question has been answered but it might not be what you actually want. You are tracking only the click outside but the dialog can be closed a number of ways like for example pressing ESC.

I would suggest doing

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

Instead of using click outside