AddressDeletionDialog.vue

<template>
  <v-dialog
    width="350"
    :value="show"
    @input="resolve"
  >
    <v-card>
      <v-card-title>{{ title }}</v-card-title>

      <v-card-subtitle class="mb-3 mt-3">
        {{ message }}
      </v-card-subtitle>

      <v-card-text class="d-flex flex-row justify-space-around">
        <v-btn
          color="grey"
          class="ma-2 elevation-2"
          text
          @click="resolve(false)"
        >
          Abort
        </v-btn>
        <v-btn
          color="primary"
          class="ma-2 elevation-2"
          text
          @click="resolve(true)"
        >
          Confirm
        </v-btn>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AddressDeletionDialog',
  model: {
    prop: 'show',
    event: 'change',
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '',
      message: '',
      resolveCallback: undefined as ((state: boolean) => void) | undefined,
    }
  },
  methods: {
    resolve(state: boolean) {
      this.resolveCallback?.(state)
      this.$emit('change', state)
    },
  },
})
</script>