Función de eliminar

Clase 15 de 20 • Curso de Single Page Applications en Laravel con Inertia y Vue.js

Carlos Eduardo Gomez García

teacher•

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 🤔

Jose Orlando Parra Soto

student•

me hago la misma pregunta 😅

Añaqui Apolinar Morales

student•

Estaria bueno hacer algun ejercicio con hooks

Wilmer Omar Aguirre Galdamez

student•

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

Miguel Bonifaz

student•

Excelente aporte 👍

Jaime Andres Ruiz Melendres

student•

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));
            }
        }
    }

Moisés de Jesús Cortés Castellanos

student•

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.

Moisés de Jesús Cortés Castellanos

student•

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

Jimmy Buriticá Londoño

student•

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

Abel da Cunha

student•

👍

Cristobal Nyram

student•

y si

Arnaldo Reyes

student•

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));
        }
    };

Gustavo Martínez

student•

Muchas gracias por tu aporte!

Gustavo Eduardo Navarro Rodríguez

student•

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

Jorge Bou-saad

student•

Comparto mi commit con Laravel 9

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

Santiago Velásquez Serna

student•

A marzo de 2024 se usa un router

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

Remberto Alvaro Molina Colodro

student•

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>

Kenneth Angulo L

student•

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

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));
    }
}

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

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

Función de eliminar

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