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

Jorge Bou-saad

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>

Formulario de editar

Progreso del curso

Introducción

Proyecto

Conclusión