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 decir con el método DELETE de nuestro controlador con la finalidad de poder eliminar las filas de nuestra tabla con datos de prueba.

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

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.

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


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...