Actualizar registros con LARAVEL y VUEjs

↑ Me gusta (0)

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 para realmente actualizar en la base de datos utilizando la tecnología de Laravel y Vue. Repasando lo que hemos realizado en el video anterior básicamente preparamos una ventana flotante con el formulario para editar un registro, esto se logra gracias al método editKeep del código Vue, que recibe los datos necesarios como el id y el keep desde la vista dashboard y los presenta en el formulario de la ventana modal.

Para finalizar con la práctica de edición de un registro, vamos a realizar las configuraciones necesarias tanto en nuestro código javascript de Vue y el Api de Laravel o lo que es lo mismo, en el controlador del proyecto.

 

Código Vue

Lo primero que vamos a utilizar será nuestro archivo javascript, entonces nos dirigimos a resources\assets\js\app.js y dentro de este archivo justo después del método editKeep creado en el anterior video, agregamos un nuevo método llamado updateKeep con los siguientes parámetros:

  1. Creamos la variable url a la cual se le asigna la ruta correspondiente para el update de un registro, esto lo podemos obtener con el comando php artisan route:list. Además, a la ruta debemos concatenarle el id del registro recibido por nuestro método.
  2. Colocamos el código de axios que al tratarse de una actualización va utilizar la función put y que va a recibir como primer parámetro la url y después los datos relacionados con el registro, recordemos que estos datos ya se encuentran almacenados en la variable fillKeep.
  3. Si todo funciona correctamente, dentro de la respuesta del código axios llamamos al método para listar o actualizar nuevamente la lista. Luego limpiamos los datos id y keep de la variable fillKeep así como también el array errors, ocultamos la ventana flotante con jquery y su función modal('hide') y como último paso presentamos un mensaje al usuario con el uso de la tecnología toastr.
  4. En caso de que algo salga mal, con la función catch() capturamos el error en la variable errors y lo presentamos en la ventana formulario.
<script>
updateKeep: function(id) {
    var url = 'tasks/' + id;
    axios.put(url, this.fillKeep).then(response => {
        this.getKeeps();
        this.fillKeep = {'id': '', 'keep': ''};
        this.errors = [];
        $('#edit').modal('hide');
        toastr.success('Tarea actualizada con éxito');
    }).catch(error => {
        this.errors = 'Corrija para poder editar con éxito'
    });
}
</script>

 

Configuración del controlador

El segundo archivo que tenemos que modificar para la actualización de un registro es obviamente el controlador, abrimos este archivo ubicado en la ruta app\Http\Controllers\TaskController.php y nos ubicamos específicamente en el update() antes creado.

  1. Utilizando la función validate() de Laravel, validamos que efectivamente se hayan enviado datos, y con el uso de la regla required definimos que el campo keep sea requerido u obligatorio.
  2. Luego utilizando eloquent y el modelo Task, buscamos el registro que sea igual o que contenga el id del registro recibido para que después por medio de su función update a la cual le pasamos como parámetro toda la información recibida en la variable $request, el api se conecte a la base de datos y actualice el registro con el id indicado.
<?php
public function update(Request $request, $id)
{
    $this->validate($request, [
        'keep' => 'required',
    ]);
    Task::find($id)->update($request->all());
    return;
}

Con esto listo podemos proceder a realizar una actualización de cualquier registro de la lista de tareas y observaremos como se actualiza correctamente, se refresca la lista con el nuevo cambio y se presenta el mensaje confirmando que la acción se ha realizado con éxito.

Una vez más hemos podido comprobar que la integración de estos dos grandes frameworks como Laravel y Vuejs son una excelente combinación para obtener ese dinamismo en nuestros proyectos que tanto deseamos.

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