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.

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

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.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


cambio de carpeta para guardar las imágenes

siguiendo el tutorial del blog para guardar imagenes, con esta linea... $query->foto_user = asset('layouts/backend/images/users/'.$random.'_'.$image->getClientOriginalName()); consigo guardar la imagen en la carpeta public donde yo quiero. Hay alguna manera de cambiar esta linea de codigo para que se guarde en la carpeta fuera de public.?que ria guardarla en la carpeta stora...

Como Instalar SQLSERVER en linux para conectarme desde un proyecto laravel

Hola saludos es posible instalar sql server en un equipo linux es que necesito conectarme a esa base de datos desde laravel o de que manera puedo hacerlo que me recomiendan? muchas gracias...

Como Migrar Store Procedure Realizado en SQL Server a Postgres

Hola saludos necesito un ayuda tengo unos store procedure que necesito migrarlos a postgres que herraminta conoce para poder hacerlos muchas gracias...

Activar botón de menú en Laravel

Veamos en este video cómo agregar una clase de forma dinámica usando laravel, de esa manera podemos cambiar la apariencia de un botón y dar feedback al usuario. class = "active"