Filtros en VUE.js usando Computed Properties

↑ Me gusta (0)

En este video vamos a utilizar varias directivas explicadas en videos anteriores como v-model, v-if y v-on, además de los métodos y las propiedades computadas (computed properties) de VUE. También realizamos una conexión ajax ya utilizada en el video 7 de esta serie para la extracción de los datos de usuarios que usamos como ejemplo. Como se ha venido trabajando a lo largo del curso para el desarrollo de los ejercicios utilizamos la plantilla html de siempre con la respectiva conexión a bootstrap y una vez más las respectivas conexiones cdn a VUE y a la librería AXIOS.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>

Conexión a un servidor con Axios

Haciendo uso de un botón con la directiva v-on:click="getUsers" haremos que este botón al ser presionado por el usuario se conecte a un servidor y por medio de la librería axios extraiga los datos de usuarios de una url ya utilizada en un anterior video.

Definimos también una directiva v-if="!lists.length" dentro del botón, con la condición de que si la propiedad lists se encuentra vacía el botón se mostrará, pero si el usuario realiza un clic, la lista se llenara con datos y el botón desparecerá.

Luego para listar los datos necesitamos utilizar la directiva v-for="item in lists" que recorrerá uno por uno los elementos almacenados de la variable lists.

Por lo tanto, el código html quedaría de la siguiente forma:

<button v-on:click="getUsers" class="btn btn-primary" v-if="!lists.length">Listar</button>
<ul class="list-group" v-else>
    <li v-for="item in lists" class="list-group-item">
        {{ item.name }}
    </li>
</ul>

En cuanto al código VUE de la parte inferior de nuestra plantilla, solo necesitamos definir la propiedad lists como un arreglo vacío. Luego es necesario crear un método llamado getUsers que será ejecutado por el evento click del botón y con la ayuda de axios extraerá los datos en formato json del servidor para llenarlos en el arreglo lists.

<script type="text/javascript">
    new Vue({
        el: '#main',
        data: {
            lists: [],
        },	
        methods: {
            getUsers: function () {
                var urlUsers = 'https://jsonplaceholder.typicode.com/users';
                axios.get(urlUsers).then(response => {
                   this.lists = response.data
                });
	    }
        },
    });
</script>

Filtro con computed properties

Para este ejemplo necesitamos agregar al código plantilla utilizado una caja de texto con la directiva v-model="name" que actuará como enlace a la propiedad name del código vue.

En el ejemplo anterior recorríamos la lista lists para iterar los datos y presentarlos en la página. Ahora vamos a necesitar iterar la función v-for="item in searchUser" que será una propiedad con lógica definida en el código vue para filtrar lo que el usuario digite en la caja de texto.

<ul class="list-group" v-else>
    <li class="list-group-item">
        <input type="text" placeholder="Buscar" class="form-control" v-model="name">
    </li>
    <li v-for="item in searchUser" class="list-group-item">
        {{ item.name }}
    </li>
</ul>

Al código vue definido para el ejercicio anterior, por medio de una función computed le añadimos la propiedad lógica searchUser que aplicará un filtro al arreglo de datos lists y buscará coincidencias con la información que digite el usuario en la caja de texto. Esta búsqueda retornara solo los ítems que coinciden con lo digitado y se guardará en el arreglo lists para ser presentados en la vista.

<script>
    new Vue({
        el: '#main',
        data: {
            lists: [],
            name: '',
        },	
        methods: {
            getUsers: function () {
                var urlUsers = 'https://jsonplaceholder.typicode.com/users';
                axios.get(urlUsers).then(response => {
                    this.lists = response.data
                });
            }
        },
        computed: {
            searchUser: function () {
                return this.lists.filter((item) => item.name.includes(this.name));
            }
        }
    });
</script>

Con este ejercicio práctico podemos darnos cuenta que nosotros traemos todos los datos necesarios del servidor una sola vez, y todo lo relacionado con el filtro lo hacemos del lado del cliente no es necesario volverse a conectar al servidor, eso hace que el sistema funcione más rápido y de una forma reactiva, es decir luego de escribir una letra o palabra ya no es necesario presionar un botón o una tecla para ejecutar la búsqueda.

1

Bienvenidos al curso de VUE 2

En este video damos la bienvenida a este gran curso, este es un tema muy solicitado y sinceramente queremos hacerlo mejor que cualquiera, de...

2

Renderización de listas VUEjs

En este video enseño a trabajar las listas en #VUE. Listamos elementos, agregamos de forma dinámica, y damos las bases necesarias para abord...

3

Vinculación de datos con Vue.js - Data Binding con V-BIND

Comencemos con una revisión de VUE, aprende en este video sobre la vinculación de datos, y esto es lo más maravilloso, es automático, es...

4

VUEjs y AJAX, manejo de respuesta JSON con VUE-RESOURCE

Vue Resource: El complemento para Vue.js que proporciona servicios para realizar peticiones web y manejar respuestas usando un XMLHttpRe...

5

Vue-resources y Axios para VUEjs

En VUE.js podemos trabajar sin problemas con AJAX, hablamos de vue-resource y de axios como te enseño en este video. Si comenzaste a...

6

Ajax con axios en VUEjs

Ha llegado la hora de trabajar con la librería más recomendada por el equipo de VUE para el manejo de peticiones AJAX. Se trata de AXIOS...

7

Introducción LARAVEL y VUE - uso de AJAX

En este video vamos hacer una pequeña introducción de la conexión de VUEjs y Laravel con el principal objetivo de mostrarte mediante...

8

Directivas, V-SHOW

En este video vamos mostrarte un poco sobre las directivas de renderizado condicional de VUE, es decir aquellas directivas que son capaces d...

9

V-IF V-ELSE y TEMPLATE

En esta oportunidad vamos hablar de las directivas entre v-if, v-else y de cómo utilizar el elemento template en VUE por medio d...

10

Eventos en VUE

En este video vamos a trabajar específicamente en los eventos de VUE, los cuales podrían ser básicamente un clic, presionar una tecla, cualq...

11

Filtros en VUE.js usando Computed Properties

En este video vamos a utilizar varias directivas explicadas en videos anteriores como v-model, v-if y v-on, además de los métodos y las prop...

12

Componentes en VUEjs

Vamos aprender a cómo crear componentes en VUE. Con componentes nos referimos a esos bloques de html que son estándar y que se usan varias v...

13

Así despedimos el curso #VUEjs

El objetivo de este video es para despedirnos de esta serie, indicando en un breve resumen todo lo que hemos aprendido a lo largo del curso,...