Lista de datos con Laravel y VUEjs

↑ Me gusta (1)

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 implementación del método index del controlador para mostrar los datos. Como primer objetivo de este video es crear la vista con el diseño de nuestra aplicación, para ello utilizamos la vista anteriormente creada y ubicada en la ruta resources\views\dashboard.blade.php.

 

Creación del Diseño

En la vista dashboard vamos a colocar todos los elementos necesarios para mostrar la información obtenida por el método index del controlador.

  1. Se establece un div como cabecera para el título de nuestra aplicación (CRUD Laravel y VUEjs).
  2. En el segundo div, creamos un botón que servirá para agregar nuevas tareas a la lista en posteriores videos.
  3. En el mismo div, se crea una tabla cuyo propósito es el de mostrar los datos obtenidos por Vue, pero por el momento sus datos serán estáticos.
  4. El último div va a contener la variable $data del código Vue de nuestra aplicación. Se van a mostrar todos los datos obtenidos, pero en el formato JSON.
@extends('app')

@section('content')

<div id="crud" class="row">
    <div class="col-xs-12">
        <h1 class="page-header">CRUD Laravel y VUEjs</h1>
    </div>
    <div class="col-sm-7">
        <a href="#" class="btn btn-primary pull-right">Nueva tarea</a>
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Tarea</th>
                        <th colspan="2">
                             
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td width="10px">1</td>
                        <td>Tarea 1</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">Eliminar</a>
                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
    <div class="col-sm-5">
        <pre>
            @{{ $data }}
        </pre>
    </div>
</div>

@endsection

 

Código VUE

En videos anteriores se había creado un archivo llamado app.js ubicado en la siguiente ruta resources\assets\js\app.js. En este archivo vamos a colocar todo el código Vue para obtener los datos necesarios por medio de una conexión axios con la ruta index de nuestra API.

  1. El id del div donde trabajará el código vue es crud este valor es configurado en el atributo el del objeto.
  2. En la etapa de creación del objeto vue, se va a realizar un llamado al método getKeeps() que definimos en los siguientes pasos.
  3. Dentro de Data creamos una variable keeps vacía de tipo array, para llenarla con los datos obtenidos.
  4. Por último, por medio del método getKeeps() accedemos a la ruta “tasks” que está enlazada a nuestro método index del controlador y por medio de axios obtener los datos necesarios para guardarlos en el arreglo Keeps. Luego, accediendo a esta variable poder mostrar la información conseguida.
<script>
new Vue({
    el: '#crud',
    created: function() {
        this.getKeeps();
    },
    data: {
        keeps: [],
    },
    methods: {
        getKeeps: function() {
            var urlKeeps = 'tasks';
            axios.get(urlKeeps).then(response => {
                this.keeps = response.data
            });
        }
    }
});
</script>

 

Presentación de los datos

Si recuerdan.. en la creación del diseño la tabla de nuestra vista contenía valores estáticos, pero gracias a nuestro código vue, a partir de aquí cambian las cosas.

  1. En la tabla de nuestra vista dashboard.blade.php utilizamos la directiva v-for para iterar en el arreglo Keeps que recordemos es la que fue llenada con todos los datos obtenidos con vue y axios.
  2. Reemplazamos los valores estáticos por la variable keep con la clave o campo a mostrar. En cada iteración de un registro Vue creará una nueva fila en la tabla mostrando cada uno de los datos establecidos.
<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Tarea</th>
            <th colspan="2">
                 
            </th>
        </tr>
    </thead>
    <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">Eliminar</a>
	</td>
        </tr>
    </tbody>
</table>

De esta manera, hemos conseguido trabajar con un listado de datos, básicamente Vue se está conectando a un API preparada en el video anterior, esta API retorna los datos que con la ayuda de vue y bootstrap les podemos dar formato para mostrarlos ordenadamente en la vista.

  • Crislin Nuñez

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