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 para realmente actualizar en la base de datos utilizando la tecnología de Laravel y Vue.

Navega en las lecciones

Inicia sesión para poder registrar las lecciones que has completado Login

Comparte en

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.

Comparte en

Creado por: Venezuela Italo Morales

CEO & Founder de Rimorsoft Online

Más información


Preventa 2018 Rimorsoft Online

Este 2017 ha sido maravilloso, en Youtube logramos cargar mas de 100 videos prácticos de acuerdo a lo que iba necesitando la audiencia, el feedback fue y es increible. Estamos poco a poco subiendo todo el material a este sitio web para que tengas centralizada toda la información y puedas marcar las lecciones estudiadas.. Con mucha frecuencia tenemos funciones nuevas y para este 2018 este portal contará con un módulo para examenes, certificados y un sistema de discusión. Todo disponible para ti.

Resumen del tutorial de VUEjs - Proyecto Workshop

Javascript VUE.js 2 0 comentarios

Con este video nos despedimos de la serie Workshop desarrollado con el framework Vuejs, te mostramos el dinamismo del proyecto realizado y te explicamos el porqué de usar esta tecnología tan sencilla y útil para la parte del frontend de nuestros aplicaciones.

Instalar Laravel 5.x en hosting compartido

Laravel 3 comentarios

Podemos trabajar en un servidor compartido si estamos hablando de un pequeño proyecto, si es un sistema como Rimorsoft es preocupante, ya que la mayoría de servidores compartidos no se pueden personalizar.

Laravel vs Symfony

Laravel PHP Symfony 3 comentarios

…o ¿Laravel o Symfony? Esta es una pregunta que me hice cuando en su momento usaba CodeIgniter de EllisLab. Symfony era el ¡buuum! en ese momento, “saber Symfony o al menos saber instalarlo era de grandes”.