app_vue2/components/Ui/Button/Delete.vue

<template>
  <main>
    <v-btn icon @click="alertDeleteItem()">
      <v-icon>mdi-delete</v-icon>
    </v-btn>

    <lazy-LayoutDialog
      :show="showDialog"
    >
      <template v-slot:dialogText>
        <v-card-title class="text-h5 grey lighten-2">
          {{ $t('attention') }}
        </v-card-title>
        <v-card-text>
          <br>
          <p>{{ $t('confirm_to_delete') }}</p>
        </v-card-text>
      </template>
      <template v-slot:dialogBtn>
        <v-btn class="mr-4 submitBtn ot_grey ot_white--text" @click="closeDialog">
          {{ $t('cancel') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn ot_danger ot_white--text" @click="deleteItem">
          {{ $t('delete') }}
        </v-btn>
      </template>
    </lazy-LayoutDialog>
  </main>
</template>

<script lang="ts">
import { defineComponent, useContext, ref, Ref } from '@nuxtjs/composition-api'
import { DataDeleterArgs, alert } from '~/types/interfaces'
import { TYPE_ALERT } from '~/types/enums'

export default defineComponent({
  props: {
    deleteArgs: {
      type: Object as () => DataDeleterArgs,
      required: true
    }
  },
  setup (props) {
    const { $dataDeleter, store, app: { i18n } } = useContext()
    const showDialog:Ref<boolean> = ref(false)

    const deleteItem = async () => {
      try {
        await $dataDeleter.invoke(props.deleteArgs)
        const alert:alert = {
          type: TYPE_ALERT.SUCCESS,
          message: i18n.t('deleteSuccess') as string
        }
        store.commit('page/setAlert', alert)
      } catch (error) {
        const alert:alert = {
          type: TYPE_ALERT.ALERT,
          message: error.message
        }
        store.commit('page/setAlert', alert)
      }
      showDialog.value = false
    }

    return {
      alertDeleteItem: () => showDialog.value = true,
      closeDialog: () => showDialog.value = false,
      deleteItem,
      showDialog
    }
  }
})
</script>

<style scoped>
</style>