Formulario para Editar con LARAVEL y VUEjs

↑ Me gusta (0)

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva ventana flotante con la función edit para preparar los datos en Vue. Primero que nada, tenemos que entender que el formulario de edición va a ser muy similar al de creación, pero sin embargo necesitamos otro formulario o vista diferente porque algunos parámetros cambian, como la ruta de acceso y los textos con relación a la ventana flotante usada para la creación.

Entonces, copiamos todo el bloque html de nuestro formulario de creación resources\views\create.blade.php y lo pegamos en un nuevo archivo dentro de la misma carpeta, pero con el nombre resources\views\edit.blade.php para nuestro formulario editar.

 

Formulario de Edición

Como ya tenemos la estructura básica de una ventana flotante utilizada para la creación, el formulario de edición va a necesitar unos ligeros cambios que los detallamos a continuación.

  1. La primera modificación a realizar en este archivo es en la directiva v-on:submit.prevent="updateKeep(fillKeep.id). Ahora utilizamos o hacemos un llamado al método Vue updateKeep al cuál le pasamos un parámetro que en este caso será el id de un registro y estará almacenado en la variable fillKeep que será creada más adelante.
  2. Cambiamos el atributo id del div principal o modal con el valor edit
  3. Modificamos los textos por “Editar tarea” tanto del título como del label utilizados en el formulario.
  4. En la directiva v-model="fillKeep.keep" utilizamos de nuevo la variable fillKeep que se creará más adelante, pero esta vez para obtener el campo keep con el texto del registro seleccionado.
  5. Al final de este formulario simplemente cambiamos el nombre del botón con el value="Actualizar".
<form method="POST" v-on:submit.prevent="updateKeep(fillKeep.id)">
<div class="modal fade" id="edit">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
                <h4>Editar</h4>
            </div>
            <div class="modal-body">
                <label for="keep">Actualizar Tarea</label>
                <input type="text" name="keep" class="form-control" v-model="fillKeep.keep">
                <span v-for="error in errors" class="text-danger">@{{ error }}</span>
            </div>
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary" value="Actualizar">
            </div>
        </div>
    </div>
</div>
</form>

 

Configuración de la vista Dashboard

Dentro de este archivo simplemente vamos a configurar la acción del botón editar para llamar a nuestra vista flotante y a su vez agregar la inclusión de la misma.

  1. Como primer paso agregamos la directiva v-on:click.prevent="editKeep(keep)" que va a tener el método editKeep para invocar a la ventana modal con el formulario de edición, esta función va a recibir como parámetro el registro seleccionado mediante la variable keep.
  2. Al final de la tabla como en el video anterior, realizamos la inclusión de la vista flotante con la función blade @include('edit') haciendo referencia a su id establecido.

 

Código Vue

Para finalizar la preparación de nuestro formulario de edición tenemos que configurar el archivo javascript resources\assets\js\app.php con el siguiente código:

  1. Dentro de la llave data: {} de Vue, añadimos una nueva variable fillKeep: {'id': '', 'keep': ''}, que será utilizada para capturar los datos id, keep y mostrarlos en la vista de nuestro formulario. Por el momento a los datos de la variable les asignamos un valor vacío.
  2. Ahora si creamos el método de editar editKeep, que va a servir para mostrar el formulario. Si recordamos dentro del archivo dashboard definimos el botón para hacer el llamado a este método y le enviamos el registro con sus datos correspondientes.
  3. Una vez que hayamos recibido los datos del registro por medio de la variable keep tenemos que asignarlos a los datos vacíos id y keep creados en la llave data de la variable fillKeep.
  4. Finalmente, utilizando Jquery invocamos a nuestra ventana modal edit y la presentamos con el evento show.
<script>
editKeep: function(keep) {
    this.fillKeep.id     = keep.id;
    this.fillKeep.keep = keep.keep;
    $('#edit').modal('show');
}
</script>

Con lo realizado solo tenemos que refrescar nuestro navegador y probar la función del botón editar, si todo ha sido configurado correctamente tendría que presentarse sin ningún problema la ventana modal para la edición del registro.

En el siguiente video vamos terminar toda la configuración necesaria para cargar esos datos obtenidos del registro en el formulario y concluir con todo el proceso de edición al realizar el update correspondiente.

Italo Morales F. Italo Morales F. 3,230.00 XP

1

Tecnologías Webpack y Laravel Mix

Bienvenido a una de las series más esperadas y solicitadas en Rimorsoft, y no es para menos. La mezcla de dos grandes frameworks como lo son...

2

Controllers, Routes, Views, Database para el CRUD

En este video vamos a comenzar formalmente con la preparación del proyecto para realizar el CRUD utilizando VUE y Laravel. Se realiza la cre...

3

Conexión VUEjs y Laravel - API

En este video vamos a crear el código necesario para iniciar el API, como primer paso utilizaremos datos de ejemplo (seeder) y configuramos...

4

Lista de datos con Laravel y VUEjs

En este video veremos realmente la integración de Laravel y Vue, el objetivo será crear el diseño con su tablas, los botones, el título y la...

5

Eliminar registros con VUEjs y LARAVEL

Ha llegado la hora de adentrarnos un poco más en el funcionamiento del CRUD y en este video vamos a trabajar con la letra D, es deci...

6

Notificaciones con TOASTR - Uso de Jquery, Laravel y Vuejs

En este video vamos a culminar el proceso de eliminación de un registro, haciéndole saber al usuario que la acción se ha realizado con éxito...

7

Formulario de creación con ventana Modal - Laravel y Vuejs

Vamos a dedicarnos en el diseño para preparar la vista de nuestro formulario de creación, utilizando la tecnología de Bootstrap con una vent...

8

Guardar datos con LARAVEL y VUEjs – Método STORE

En este video vamos a continuar con el formulario de creación para añadir una nueva tarea a nuestra base de datos, utilizando Vue para h...

9

Formulario para Editar con LARAVEL y VUEjs

Vamos a preparar el terreno para la edición de un registro de nuestra lista de tareas, es decir crearemos el formulario y su respectiva vent...

10

Actualizar registros con LARAVEL y VUEjs

Tenemos que continuar con el proceso de edición de un registro y es por esto que en este video vamos a crear el bloque de código necesario p...

11

X-XSRF-TOKEN LARAVEL, VUE y AXIOS

Este video será el Bonus número 1 dentro de esta serie y en el cual vamos aprender un poco sobre seguridad y como Laravel nos ayuda en ese s...

12

Paginación usando VUEjs y LARAVEL - Parte 1

Video Bonus número 2, en el que vamos aprender paso a paso cómo realizar la paginación de varios registros de la base de datos en una lista,...

13

Paginación VUEjs y LARAVEL Computed Property - Parte 2

Video Bonus número 3, en el que vamos a continuar con la práctica de la paginación de varios registros utilizando Laravel y Vuejs, enfocándo...

14

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 3

Video Bonus número 4, vamos a continuar con la programación de la propiedad pagesNumber para obtener los números de página con cálculos...

15

Paginación VUEjs y LARAVEL Cálculo de páginas - Parte 4 (FINAL)

Video Bonus número 5, donde vamos a continuar básicamente con la creación del html o diseño de la paginación, utilizando los métodos y varia...

16

CRUD en Laravel y VUEjs - Despedida

Último video y despedida de la serie Crud en Laravel y Vuejs, corto resumen de todo lo visto a lo largo de los videos y corrección d...

Libro de Laravel Engineer Compra el libro Laravel Engineer