Código de actualizar

Diego Dominguez

Estudiante

Para quien use <scritp setup>

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import {Link} from '@inertiajs/inertia-vue3';
import { useForm } from '@inertiajs/inertia-vue3'
const props=defineProps({note: Object});
const form = useForm({
    excerpt:props.note.excerpt,
    content:props.note.content
});

const submit = () => {
    form.put(route('notes.update',props.note.id), form);
};
</script>

Freddy Aldair Muñoz Huasasquiche

Estudiante

Hace 4 años

Gracias, buen aporte!

javier martinez

Estudiante

Hace 2 años

Para ver los errores en la validacion.

<script setup>
form.put(route("notes.update", props.note.id), {
    onError: (e) => console.log(e)
});
</script>

Carlos Eduardo Gomez García

Estudiante

Hace 6 años

Ohh esto es increíble, intuyo cómo funciona, de hecho, inspeccionando la sección de network veo que Inertia (específicamente en la línea this.inertia.put()) hace un Ajax Request hacia la ruta que le pasamos y es ahí en donde entra Laravel para atender esa solicitud y hacer lo que tiene que hacer, es como si enviaramos un fetch() de toda la vida, pero ya Inertia lo hace por nosotros con la configuración requerida para poder comunicarse con Laravel (csrf token incluído). . Amo Inertia 💚

Jose Orlando Parra Soto

Estudiante

Hace 5 años

ya somos dos

Aarón Fabricio Santa Cruz Valdez

Estudiante

Hace 5 años

Me cuesta entenderlo creo que me acostumbre más a livewire.

Jimmy Buriticá Londoño

Estudiante

Hace 5 años

Es increíble como la combinación de Laravel + Inertia + Vue nos facilita la vida como desarrolladores.

Jorge Bou-saad

Estudiante

Hace 4 años

Les dejo mi commit de esta clase con Laravel 9

https://github.com/jlbousing/platzi-inertia/commit/12e371768c6719f961e6ac5c0e023461c453aea5

Miguel Bonifaz

Estudiante

Hace 5 años

Me gusta esta sintaxis 😅

 methods: {
        submit() {
            this.$inertia.post(
                this.route('notes.update', this.note.id), {
                    excerpt: this.form.excerpt,
                    content: this.form.content,
                }
            )
        }
    }

Francisco Hernandez

Estudiante

Hace 5 años

Tambien es valido enviar el request desde vue con Destructuring Data

¿Como ?

this.$inertia.put(this.route('notes.update',this.note.id), {...this.form});

información de que es "Desructuring Data"

Añaqui Apolinar Morales

Estudiante

Hace 5 años

Me gusta mas usar esa nota

Remberto Alvaro Molina Colodro

Estudiante

Hace 3 años

Me parece genial Vue te simplifica muchas cosas

Juan Felipe Lara Martinez

Estudiante

Hace 5 años

Si alguien me ayuda porque se da este error que me ha generado en consola "Access to XMLHttpRequest at (') from origin has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Fue necesario cambiar la linea del redirect

 return redirect()->route('notes.index');

por

return Inertia::location('/notes');

Alexander Agrazal

Estudiante

Hace 5 años

en Vue sin Inertia se podía crear múltiple botones usando los mismo campo del model, pero como ahora el formulario se amarra a un método, cómo se haría en ese caso?

Dany Pascual Gomez Sanchez

Estudiante

Hace 2 años

Mi código para hacer uso de como mínimo una alerta de notificación al usuario:

const submit = () => {
    //rta = form.put(route("notes.update", props.note.id), form);
    axios.put(route("notes.update", props.note.id), form).then((res) => {
        console.log(res.data.successMessage);
        alert(
            "Estado: " +
                res.data.successState +
                " / RTA: " +
                res.data.successMessage
        );
        if (res.data.successState == 1) {
            window.open(route("notes.index"), "_self");
        }
    });
};
```El controlador devuelve algo así:

```js
return response()->json(['successState' => $successState, 'successMessage' => $successMessage]);

David Martínez López

Estudiante

Hace 3 años

Jetstream tiene notificaciones muy bonitas por defecto que no siempre usamos, les dejo un ejemplo de como usarlas:

/** * Update the specified resource in storage. */ public function update(UpdateNoteRequest $request, Note $note) { $note->update($request->validated()); session()->flash('flash.banner', 'Nota actualizada con éxito'); session()->flash('flash.bannerStyle', 'success'); return redirect()->route('notes.index');

Blad Zipt

Estudiante

Hace 4 años

Italo, usted muy bien, de 10, pero su PC tiene un poco de Lag, xd.

Blanca Segura Garcia

Estudiante

Hace 4 años

Pero a qué viene este comentario? Qué significa "Lag"?

Código de actualizar

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