https://inertiajs.com/docs/v2/advanced/events#finish
Once the action is finished, with success or without success, the onFinish event is triggerd.
What do you really need to do ?
Modal closes on clicking as soon on the delete button? Even the request is not completed yet and resource is not deleted. After a 1 or 2 sec resource gets removed form the ui.
My Modal component used in the Users/Index.vue file and the delete functionality.
<!-- Modal Teleported to body -->
<teleport to="body">
<Modal v-model="showModal" @cancel="handleCancel" @delete="handleDelete">
<template #title>Delete Category</template>
<template #message>
Are you sure you want to delete
<span class="font-semibold">{{ userToDelete?.name }}</span>?
</template>
</Modal>
</teleport>
//Script
<script setup>
import { usePage, Head, Link, router } from '@inertiajs/vue3';
import { computed, ref } from 'vue';
import EmptyMessage from "@components/Admin/EmptyMessage.vue";
import { Edit, Trash2 } from 'lucide-vue-next';
import Breadcrumb from "@components/Breadcrumb.vue";
import Modal from '../../../Components/Modal.vue';
const page = usePage();
const users = computed(() => page.props.users.data);
const breadcrumbLinks = [
{ name: "Dashboard", href: route("admin.dashboard") },
{ name: "users", href: route("users.index") },
];
const showModal = ref(false);
const userToDelete = ref(null);
function confirmDelete(user) {
userToDelete.value = user;
showModal.value = true;
}
function handleCancel() {
showModal.value = false;
userToDelete.value = null;
}
function handleDelete() {
if (userToDelete.value) {
// Call delete route
router.delete(route('users.destroy', userToDelete.value.id), {
onSuccess: () => {
},
onFinish: () => {
showModal.value = false;
userToDelete.value = null;
},
});
}
}
</script>
My controller delete logic.
public function destroy(User $user)
{
DB::transaction(function () use ($user) {
// store the new event log to the audits table
ActivityService::log('updated', $user);
// TODO: delete the uploaded user avatar (unlink)
$user->delete();
});
session()->flash('success', 'User has been deleted!');
return redirect()->route('users.index');
}
Please or to participate in this conversation.