Eliminar registros con VUEjs y LARAVEL

↑ Me gusta (0)

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 decir con el método DELETE de nuestro controlador con la finalidad de poder eliminar las filas de nuestra tabla con datos de prueba. Para apreciar mejor la práctica de eliminación de registros, vamos primero a modificar nuestro archivo seeder para que este nos cree hasta 35 registros de datos de prueba, en nuestra tabla Tasks de la base de datos.

No dirigimos al archivo TasksTableSeeder y en la siguiente línea de código factory(Task::class, 35)->create(); modificamos el número de registros que queremos que se creen, en este caso serán 35.

Para volver a llenar nuestra tabla con los nuevos registros utilizamos una vez más el comando php artisan migrate:refresh --seed y actualizamos la vista en el navegador para ver todos los datos de prueba creados.

En el video anterior dentro del archivo app.js habíamos programado nuestro código vue con un método para obtener la lista de datos en conexión con el método index del controlador, pues lo que vamos hacer a continuación es una lógica muy parecida.

 

Código Vue

La base de nuestro código Vue básicamente se va a mantener igual, pero ahora vamos a crear otro método que se va a encargar de realizar la eliminación de los registros disponibles.

  1. Creamos un nuevo método deleteKeep que va ser invocado por el botón eliminar de nuestra vista y este a su vez va a recibir un valor que será el id de ese registro en específico donde se presionó dicho botón.
  2. En la variable url, vamos a colocar la ruta para eliminar del controlador, que con la ayuda del comando php artisan route:list observamos que el método destroy necesita un id el cual es recibido por nuestro método.
  3. Con Axios esta vez ya no se utilizará el método get(), sino el método delete(), al cual le pasamos como parámetro la url con el id definido en la línea anterior.
  4. Finalmente hacemos un llamado al método vue getKeeps() creado en el video anterior, únicamente para actualizar la tabla y observar que se haya borrado el registro seleccionado.
<script>
methods: {
    deleteKeep: function(keep) {
        var url = 'tasks/' + keep.id;
        axios.delete(url).then(response => {
            this.getKeeps();            
        });
    }
}
</script>

 

Modificación de la vista

Dentro de la vista Dashboard.blade.php de nuestro proyecto, vamos a realizar la respectiva configuración del botón eliminar de la tabla.

  1. Como parámetro del botón agregamos la directiva v-on:click, para que el botón al ser presionado se conecte con nuestro código Vue haciendo un llamado al método deleteKeep y enviando el valor del id de ese registro.
  2. Además de esto, agregamos la opción .prevent a la directiva para que simplemente la página no se refresque al eliminar un registro, provocando así el dinamismo tan buscado.
<table class="table table-hover table-striped">
…
    <tbody>
        <tr v-for="keep in keeps">
	<td width="10px">@{{ keep.id }}</td>
	<td>@{{ keep.keep }}</td>
	<td width="10px">
	    <a href="#" class="btn btn-warning btn-sm">Editar</a>
	</td>
	<td width="10px">
	    <a href="#" class="btn btn-danger btn-sm" v-on:click.prevent="deleteKeep(keep)">Eliminar</a>
	</td>
        </tr>
    </tbody>
…
</table>

Con todo esto realizado podemos decir que cumplimos con el objetivo de este video, el cual era de programar la eliminación de registros de nuestra tabla y mediante la combinación de estas tecnologías como Laravel y Vue simular que estamos trabajando en tiempo real.

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...