Formulario de crear

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

María Sierra

student•

Formulario de crear

Para crear una vista de una acción del controlador, vamos a la carpeta App/Http/Controllers y en el controlador de la vista que queremos editar escribimos:

		public function create()
    {
        return Inertia::render('Notes/Create');
    }

Después vamos a resources/js/Pages/Notes y creamos el archivo Create.vue, aquí vamos a tener un código muy parecido al de Edit.vue pero en vez de traer los datos, vamos extraerlos de la forma.

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Módulo de 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="p3-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Crear una nota</h4>
                            <p class="text-sm text-gray-600">Luego de crear la podrás editar</p>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:roundend-md p-4">
                            <form @submit.prevent="submit">
                                <label class="block font-medium text-sm text-gray-700">Resumen</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-700">Contenido</label>
                                <textarea class="form-input w-full rounded-md shadow-sm" v-model="form.content" rows="8"></textarea>
                                <button class="bg-blue-500 rounded-md hover:bg-blue-700 text-white font-bold py2 px-4">Crear</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
        },
        props: {
            note: Object
        },
        data () {
            return {
                form: {
                    excerpt: '',
                    content: '',
                }
            }
        },

😜 Recuerda que cuando hagas un link a algún ruta usar la función route('') para estás se creen

<inertia-link :href="route('notes.create')" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md">Crear</inertia-link>

Jimmy Buriticá Londoño

student•

Super

Wilmer Omar Aguirre Galdamez

student•

Como ejercicio adicional me di la tarea de agregar un boton de volver al lado de crear y editar.

Julian David Alzate Cuervo

student•

Actualmente usamos Link

<Link :href="route('notes.create')" class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md">
                                Crear
                        </Link>

Jorge Bou-saad

student•

Comparto mi commit con Laravel 9

https://github.com/jlbousing/platzi-inertia/commit/03df549a9bac59fcb4c4a72593897f365703f8dc

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Módulo de 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="p3-4 sm:px0">
                            <h3 class="text-lg text-gray-900">Crear una nota</h4>
                            <p class="text-sm text-gray-600">Luego de crear la podrás editar</p>
                        </div>
                    </div>
                    <div class="md:col-span-2 mt-5 md:mt-0">
                        <div class="shadow bg-white md:roundend-md p-4">
                            <form @submit.prevent="submit">
                                <label class="block font-medium text-sm text-gray-700">Resumen</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-700">Contenido</label>
                                <textarea class="form-input w-full rounded-md shadow-sm" v-model="form.content" rows="8"></textarea>
                                <button class="bg-blue-500 rounded-md hover:bg-blue-700 text-white font-bold py2 px-4">Crear</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout'
    import Welcome from '@/Jetstream/Welcome'

    export default {
        components: {
            AppLayout,
            Welcome,
        },
        props: {
            note: Object
        },
        data () {
            return {
                form: {
                    excerpt: '',
                    content: '',
                }
            }
        },

Formulario de crear

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