Formulario de editar

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

Comentarios

Carlos Eduardo Gomez García

teacher•

Lo mágico de esto es que los datos ya aparecen puestos, y esto es gracias al v-model que es una de las cosas más hermosas de Vue, el "Two Way Data Binding", de hecho, si en cualquier otro lugar de esa página imprimeras el extracto: {{ form.excerpt }} podrías ver cómo al editar el extracto en el campo de texto también se edita en ese lugar en donde lo imprimiste, es lo mágico de Vue y una de las cosas que más me gusta :D

Brian Sánchez Izquierdo

student•

Genial, como en la tecnología de Xamarin existe igual el homologo de Bindable properties y puedes indicarle si es One-way, o como es el caso de Vue, two-way!

Diego Dominguez

student•

Si usan la sintaxis <script 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
});
</script>

Gustavo Cruz

student•

Gracias.

Para mi las rutas de importación no funcionan con:

@inertiajs/inertia-vue3

pero sí sin inertia:

@inertiajs/vue3

CARLOS ENRIQUE CALDERON AGUILAR

student•

Se puede instalar el eslint de vue con inertia en Laravel para ver los logs en la pantalla como cuando usas vue solito ?? alguien lo ha intentado??

Jimmy Buriticá Londoño

student•

Les comparto el sitio oficial de Inertia.js

Jorge Bou-saad

student•

Dejo aqui mi commit con Laravel 9 y vue 3. Sin embargo tengo un bug con el boton de Editar, no se me muestra el color de fondo azul...no se por que. Si alguien descubre la razon, por fa compartenmela

https://github.com/jlbousing/platzi-inertia/commit/4245048216c7b03b22170d5d2474b2e9eb98a762

JUAN ESTEBAN BERRIO

student•

Es por que eliminar no lo tienes como un <button> sino con un <a>, puedes probar con:

<button class="font-bold py-2 px-4 rounded-md bg-red-500"> <a href="#" @click.prevent="destroy"> Delete </a> </button>

JUAN ESTEBAN BERRIO

student•

aqui te dejo el template:

<template> <AppLayout title="Dashboard"> <template #header> <h2 class="font-semibold text-xl text-gray-800 leading-tight"> Notas </h3> </template> <div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="md:grid md:grid-cols-3 md:gap-6"> <div class="md:col-span-1"> <div class="px-4 sm:px-0"> <h3 class="text-lg text-gray-900">Notes Edit</h4> <p class="text-sm text-gray-600">This actions not rollback option!</p> </div> </div> <div class="md:col-span-2 mt-5 md:mt-0"> <div class="shadow bg-white md:rounded-md p-4"> <form @submit.prevent="submit"> <label class="block font-medium text-sm text-gray-900" style="font-weight: bold"> Abstract </label> <textarea class="form-input w-full rounded-md shadow-sm" v-model="form.excerpt"></textarea> <label class="block font-medium text-sm text-gray-900" style="font-weight: bold"> Content </label> <textarea class="form-input w-full rounded-md shadow-sm" v-model="form.content" rows="12"></textarea> <button class="font-bold py-2 px-4 rounded-md bg-blue-500" style="margin: 10px"> Edit </button> <button class="font-bold py-2 px-4 rounded-md bg-red-400" style="margin: 10px"> <a href="#" @click.prevent="destroy"> Delete </a> </button> </form> </div> </div> </div> </div> </div> </AppLayout> </template>

VICTOR CAUDILLO

student•

¿Qué diferencia existe entre pasar la información a la vista con compact o en array?

Kenneth Angulo L

student•

La diferencia es la conveniencia (al estilo americano), es mas rapido usar la funcion compact. .

compact() looks for a variable with that name in the current symbol table and adds it to the output array such that the variable name becomes the key and the contents of the variable become the value for that key. In short, it does the opposite of extract(). .

Otra ventaja de usar esta funcion es que permite combinar variables con arreglos, Exp: Puedo tener dos variables que necesito pasar a la vista. y Tengo un arreglo asocitivo con 3 elementos. Si compacto todo lo anterior paso a la vista 5 variables que puedo usar con datos diferentes

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

Formulario de editar

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