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

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

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.

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


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...