Opción de Eliminar en CRUD Laravel Inertia

Vamos a implementar la funcionalidad para eliminar una categoría; colocamos un nuevo enlace usando el componente de Link e indicamos el método de tipo DELETE en el TD de las acciones en el listado:

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>
***

Y desde el controlador, es exactamente el mismo código usado en Laravel básico, que es llamar a la función de delete() de Eloquent:

app/Http/Controllers/Dashboard/CategoryController.php

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

Si vemos en la consola del navegador desde el componente de Index.vue de las categorías, veremos una advertencia como la siguiente:

...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>.

Tal cual indica, renderizar un enlace para este tipo de operaciones no es lo recomendado ya que, el usuario puede abrir una pestaña en el navegador; para evitar este comportamiento, hay que convertir el enlace a un botón; para ello:

<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>

Transcripción del vídeo

Ahora vamos a implementar la opción de delete que es muy sencilla simplemente aquí colocamos link aquí Fíjate que como es un enlace y por como quien dice por excelencia los enlaces envían peticiones de tipo get o siempre envían peticiones de tipo get para que podamos enviar una petición de tipo delete en este caso tenemos que colocar método de tipo delete así que la tenemos sencillísimo y esto simula una petición de tipo delete por lo demás la ruta le pasamos a aquí la categoría o directamente categoría ID como tú quieras y aquí un delete bonito y listo aquí falta la redirección Pero eso lo vemos Ya en la siguiente sección Entonces es eso por aquí importante Ya saliendo poquito de lo comentado Aquí también coloqué bueno había escrito mal el título ahorita es que me di cuenta y ahorita lo arreglé seguramente te distes cuenta antes si no me dijistes Pero en fin vamos a colocar aquí el método de tipo delete conservamos todo esto y faltaría aquí colocar la ruta de tipo destroy Mira yo tengo esto yo creo que es lo peor que pudieron hacer No sé por no lo colocan delete y así todo ese juego y aquí colocamos el ID si quieres coloca punto ID o demás y todo esto se conserv igual volvemos acá y hacemos la difícil operación aquí Recuerda que recibimos inyectamos la categoría con todas las ventajas que esto nos trae de que si le pasamos algo que no exista y automáticamente devuelve un 404 Así que siempre en este punto en la línea 68 en mi caso sabemos o estamos completamente seguros de que existe algo con lo cual podemos manipular Y en este caso eliminar Y eso sería ya todo entonces volvemos acá voy a eliminar Esta cosa que coloqué aquí Recuerda que es la dos para ver si funciona doy a delete y recargo por si las moscas y puedes ver que se eliminó así que así de fácil es realizar la función de eliminar y ya con esto Terminamos el objetivo de esta clase.

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

Transcripción del vídeo

Seguramente te diste cuenta de que cuando eliminaste si por aquí dejaste tu consola desarrolladores activa que te aparece un mensaje como el siguiente en el cual te desaconseja emplear los links el que estamos empleando aquí para operaciones que sean de tipo post putp delete etcétera entonces bueno Esto lo podemos acomodar muy fácilmente tal cual indica por aquí indicando mediante el atributo de as indicando que sea un botón aquí yo también coloqué el tipo pero en principio es el has solamente así que pues nada venimos acá colocamos as igual a buton se perdió aquí el foco buton y también voy a colocar aquí el tipo de tipo buton regresamos por aquí tengo poquito que eliminar Así que lo voy a cuidar recargo para que quite los errores y voy a eliminar este que tampoco me gusta y ahí puedes ver que todo funciona correctamente y ya no aparece el mensaje así que ya con esto terminamos.

15-08-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Opción de Eliminar en CRUD Laravel Inertia