Función de eliminar

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

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

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.

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

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

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

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