I am trying to create a custom component that wraps a Vuetify v-dialog.

I am having trouble with closing the dialog using a button inside the dialog.

I've tried many things, like @emit('input', false), this.value = false or using a local data value instead of value, but nothing seems to work.

My dialog looks like this (simplified):

// file: DeleteDialog.vue
<template>
  <v-dialog :value="value" @input="$emit('input', $event)" width="550">
    <template v-slot:activator="{ on, attrs }">
      <slot
          name="activator"
          v-bind:on="on"
          v-bind:attrs="attrs"></slot>
    </template>

    <v-btn @click="closeDialog">
      Close
    </v-btn>

  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit('input', false);
    },
  },
};
</script>

When using the dialog like this, how do I get the Close-button to work?

<DeleteDialog>
  <template v-slot:activator="{on, attrs">
    <v-btn v-on="on" v-bind="attrs">
      Show dialog
    </v-btn>
  </template>
  Are you sure you want to delete this user?
</DeleteDialog>

CodePudding user response：

The prop you pass value is responsible for showing or hiding your v-dialog inside DeleteDialog.vue. So when clicking the button close, we will emit an event close that will maake the parent of DeleteDialog change the prop value it passed to it as false.

// in your parent component
<DeleteDialog :value="show_dialog" @close="show_dialog = false> 

in your deleteDialog

//in delete dialog
<template>
  <v-dialog :value="value" width="550">

    <v-btn @click="closeDialog">
      Close
    </v-btn>

  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit('close');
    },
  },
};
</script>

I think that is more suitable way of achieving what you want