Delete Option in CRUD Laravel Inertia

Let's implement the functionality to delete a category; we place a new link using the Link component and indicate the DELETE type method in the TD of the actions in the list:

resources/js/Pages/Dashboard/Category/Index.vue

***
<td class="p-2">
    <Link :href="route('category.edit', c.id)">Edit</Link>
    <Link method="DELETE" :href="route('category.destroy', c.id)">Delete</Link>
</td>
***

And from the controller, it's exactly the same code used in basic Laravel, which is to call Eloquent's delete() function:

app/Http/Controllers/Dashboard/CategoryController.php

public function destroy(Category $category)
{
    $category->delete();
}

If we look at the browser console from the Index.vue component of the categories, we will see a warning like the following:

...links is discouraged as it causes "Open Link in New Tab/Window" accessibility issues. Instead, consider using a more appropriate element, such as a <button>.

As indicated, rendering a link for this type of operation is not recommended since the user can open a tab in the browser; to avoid this behavior, the link must be converted to a button; to do this:

<Link as="button" type="button" method="DELETE" class="text-sm text-red-400 hover:text-red-700 ml-2" :href="route('category.destroy', c.id)">Delete</Link>

Video Transcript

Now we are going to implement the delete option which is very simple simply here we place link here Note that as it is a link and as they say par excellence links send get type requests or always send get type requests so that we can send a delete type request in this case we have to place a delete type method so we have it very simple and this simulates a delete type request for the rest the route we pass here the category or directly category ID as you want and here a nice delete and ready here the redirection is missing But we will see that Now in the next section So that is that important here Now going out a little from what was commented Here I also placed well I had written the title wrong just now is that I realized and now I fixed it surely you realized before if you did not tell me But anyway we are going to place the delete type method here we keep all this and here it would be missing to place the destroy type route Look I have this I think it is the worst thing they could do I do not know why they do not put delete and so on all that game and here we place the ID if you want put point ID or others and all this is preserved the same we come back here and do the difficult operation here Remember that we receive we inject the category with all the advantages that this brings us that if we pass something that does not exist and it automatically returns a 404 So always at this point on line 68 in my case we know or we are completely sure that something exists with which we can manipulate And in this case delete And that would be all so we come back here I am going to delete This thing that I placed here Remember that it is the two to see if it works I hit delete and reload just in case and you can see that it was deleted so that is how easy it is to perform the delete function and with this we finish the objective of this class.

Resolving links is discouraged as it causes "Open Link in New Tab/Window" in Laravel Inertia

Video Transcript

Surely you noticed that when you deleted if you left your developer console active here that a message like the following appears in which it advises you not to use the links that we are using here for operations that are of the post putp delete type etc. Then well We can accommodate this very easily as indicated here indicating through the as attribute indicating that it is a button here I also placed the type but in principle it is only has so well we come here we place as equals button the focus was lost here button and I am also going to place the type of type button here we come back here I have a little bit to delete So I am going to take care of it reload to remove the errors and I am going to delete this one that I also do not like and there you can see that everything works correctly and the message no longer appears so with this we are done.

24-08-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Delete Option in CRUD Laravel Inertia