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} from "~/types/interfaces";
  import {TYPE_ALERT} from "~/types/enums";
  import {alert} from "~/types/interfaces";

  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>