Formulario de editar

Curso de Single Page Applications en Laravel con Inertia y Vue.js

Cursos Empresas Blog Live Conf Eventos Precios

0:008:46

Formulario de editar

Curso de Single Page Applications en Laravel con Inertia y Vue.js

Clase 11 de 20

Clase 11 / 20

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

Jorge Bou-saad

Hace 4 años

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

Hace 4 años

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

Hace 4 años

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>

Comentarios (7)7 comentarios

Carlos Eduardo Gomez García

Hace 6 años

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

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

Si usan la sintaxis <script setup>

Gustavo Cruz

Gracias.

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

@inertiajs/inertia-vue3

pero sí sin inertia:

@inertiajs/vue3

CARLOS ENRIQUE CALDERON AGUILAR

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

Les comparto el sitio oficial de Inertia.js

Seba Cardoso

Hace 3 meses

Excelente

VICTOR CAUDILLO

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

Kenneth Angulo L

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

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

Formulario de editar

Progreso del curso

Introducción

Proyecto

Conclusión