Función de eliminar

Curso de Single Page Applications en Laravel con Inertia y Vue.js

Cursos Empresas Blog Live Conf Eventos Precios

0:005:12

Función de eliminar

Curso de Single Page Applications en Laravel con Inertia y Vue.js

Clase 15 de 20

Clase 15 / 20

Comentarios (10)10 comentarios

Carlos Eduardo Gomez García

Hace 6 años

Jose Orlando Parra Soto

Hace 6 años

Añaqui Apolinar Morales

Hace 6 años

Wilmer Omar Aguirre Galdamez

Hace 5 años

Miguel Bonifaz

Hace 5 años

Jaime Andres Ruiz Melendres

Hace 5 años

Moisés de Jesús Cortés Castellanos

Hace 4 años

Moisés de Jesús Cortés Castellanos

Hace 4 años

Jimmy Buriticá Londoño

Abel da Cunha

Cristobal Nyram

Arnaldo Reyes

Gustavo Martínez

Gustavo Eduardo Navarro Rodríguez

Hace 5 años

Jorge Bou-saad

Hace 4 años

Santiago Velásquez Serna

Hace 3 años

Remberto Alvaro Molina Colodro

Hace 3 años

Kenneth Angulo L

Hace 4 años

Me gusta inertia porque hace más fácil el hecho de comunicarse con el servidor y tener server side rendering :D . Aun así, me pregunto qué sucede con los hooks de Vue 🤔

me hago la misma pregunta 😅

Estaria bueno hacer algun ejercicio con hooks

Como trabajo adicional quise agregar un boton de eliminar en el index justo al lado de editar.

Esto lo logre agregando method="delete" dentro de <inertia-link> y la ruta hacia notes.destroy

Excelente aporte 👍

pásale el id de la nota por parámetro a la función destroy,

@click.prevent="destroy(note.id)

y lo tomas el método, quedando

methods:{
        destroy($id){
            if(confirm('Desea Eliminar?')){
                this.$inertia.delete(this.route('notes.destroy',$id));
            }
        }
    }

Yo lo hice en la vista Index, y alado del botón ver y editar puse el botón de eliminar.

Si a ti te aparece <script setup>, la forma que encontré para que funcionara fue:

import AppLayout from '@/Layouts/AppLayout.vue';
import { Link, useForm } from '@inertiajs/inertia-vue3';

defineProps({
    notes: Array
});

const destroy = (id) => {
    if(confirm('Desea Eliminar?')) {
        useForm().delete(route('notes.destroy',id));
    }
}

Desde luego puedes sacar useForm() en una constante. Y el botón que que hice:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md" @click.prevent="destroy(note.id) ">Eliminar</button>

El el controlador del lado del laravel es aplicar el típico delete.

Nota: A la fecha de esta publicación use Laravel 9.25.1 y Vue 3.2.37.

Encontre que podemos sustituir useForm() por Inertia.

<script setup>
import { Inertia } from '@inertiajs/inertia';
import { Link} from '@inertiajs/inertia-vue3';
import AppLayout from '@/Layouts/AppLayout.vue';

defineProps({
    notes: Array
});

const destroy = id => {
    if(confirm('Desea Eliminar?')) {
        Inertia.delete(route('notes.destroy',id));
    }
}
</script>

Y funciona exactamente igual

Es increíble lo fácil que se hace el CRUD con esta tecnología.

👍

y si

Esta fue el codigo que utilice para que me funcionara Eliminar

const destroy = () => {
        if(confirm('Desea Eliminar?')) {
            form.delete(route('notes.destroy', props.note.id));
        }
    };

Muchas gracias por tu aporte!

Se puede hacer de esta forma también después del botón de editar:

<button @click.prevent="destroy"
                                    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md"
                                >Eliminar
                                </button>

Así queda mejor visualmente y dentro del form. Saludos!.

Comparto mi commit con Laravel 9

https://github.com/jlbousing/platzi-inertia/commit/3e2e2ffb1c39d786baca21c8434ed86259750237

A marzo de 2024 se usa un router

import { Link, router } from "@inertiajs/vue3";
....
router.delete("notes/" + id);
...

Yo lo implemente de esta manera para que me funcionara, lo hice en el Index

const destroy = ( id ) => {
    if( confirm('Esta seguro de eliminar esta Nota ?') ) {

        useForm({}).delete(route('notes.destroy', id));

    }

y mi button

   <button @click.prevent="destroy(note.id)"> Eliminar</button>

Esta parte fue complicada. Debido al desconocimiento de vue. . Aparantemente hay dos sintaxis diferentes de escribir o de estructurar los archivos vue. . Y por otro lado, encuentro que los botones se comportan diferente dentro o fuera del formulario, eso no me queda claro, Pero con los ultimos comentarios de los companeros encontre como hacerlo. .

Introducción

Cómo aprenderás a crear SPAs en Laravel

Introducción a Jetstream

Proyecto

Conoce qué SPA vas a construir

Configuración inicial

Sistema basado en componentes

Jetstream: configuración inicial

Jetstream: personalización

Listado de notas: configuración inicial

Listado de notas: personalización

Vista detalle de nota

Formulario de editar

Código de actualizar

Formulario de crear

Código de guardar

Función de eliminar

Flash message

Buscador

Conclusión

Repaso final

Despedida

Clase bonus: nunca parar de aprender

Función de eliminar

Progreso del curso

Introducción

Proyecto

Conclusión