Código de actualizar

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

Diego Dominguez

student•

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

student•

Gracias, buen aporte!

javier martinez

student•

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

teacher•

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

student•

ya somos dos

Aarón Fabricio Santa Cruz Valdez

student•

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

Jimmy Buriticá Londoño

student•

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

Jorge Bou-saad

student•

Les dejo mi commit de esta clase con Laravel 9

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

Miguel Bonifaz

student•

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

student•

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

student•

Me gusta mas usar esa nota

Remberto Alvaro Molina Colodro

student•

Me parece genial Vue te simplifica muchas cosas

Juan Felipe Lara Martinez

student•

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

student•

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

student•

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

student•

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

student•

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

Blanca Segura Garcia

student•

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

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

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

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

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