🚬 Filters

Muchas veces queremos que a la información que se le muestra al usuario se le aplique algún tipo de transformación, esto suele ocurrir porque para el código necesitamos cierto formato o tipo de dato pero para el usuario final (en la vista) es mejor expresarlo de manera diferente.

Por ejemplo podemos tener algún tipo de propiedad numérica que refleje el valor total de una transacción comercial. Como desarrolladores necesitamos que esa propiedad sea un número porque tenemos que realizar operaciones aritméticas sobre la misma (sumas, restas, multiplicaciones, etc), pero seguramente a la hora de mostrar eso por pantalla necesitemos un String donde podemos darle consistencia al resultado a través símbolos como $ o .. De esta manera una propiedad con el valor 1999 sera mostrada en pantalla como $ 1.999.

Podríamos realizar este tipo de transformaciones utilizando propiedades computadas, pero esto terminaría agregando complejidad y perjudicando la performance de la aplicación, ya que voy a estar duplicando en el código propiedades (una para el desarrollador y otro para el usuario). Para este tipo de situaciones Vue, también nos da la posibilidad de crear filtros.

Los filtros permiten crear estas transformaciones sobre las propiedades sin modificar el valor en si. Cuando aplique un filtro la propiedad se muestra en pantalla transformada pero el valor de la propiedad en el vm nunca se modifica.

Vue.filter()

El método estático Vue.filter() nos permite crear filtros de manera global. Esto quiere decir que van a poder ser utilizados por cualquiera de nuestros componentes.

La función recibe dos parámetros, el primero es el nombre del filtro. Este nombre es importante ya que define como vamos a llamarlo luego en el HTML. El segundo parámetro es una función. Esta función recibe como argumento el valor a la cual se le quiere aplicar el filtro y debe retornar un nuevo valor (el valor transformado) para renderizar en la UI.

Vamos a crear un filtro global que nos permita mostrar todos los géneros que tiene asociado un artista. Esta información es provista por la API de Spotify por lo tanto ya la tenemos en nuestro componente.

1. Abrimos el archivo main.js. Como es un filtro global vamos a crearlo en el archivo principal.

2. Creamos el filtro con el nombre dash-list y definimos la función que va transformar la información.

Vue.filter('dash-list', (val) => {
  if (!val || !val.genres) { return '' }

  return val.join(', ')
})

Como la propiedad genres de cada artista (recuerden que esto proviene de la API) es un Array, vamos a usar el método join para representar el array como un String separado por comas.

El método join me permite transformar un Array a un String unificando cada el elemento del arreglo usando un texto o caracter especifico (en nuestro caso un espacio)

1. El filtro ya esta creado y listo para usar, simplemente nos queda integrarlo con el HTML. Vamos al componente Artist.vue y debajo del tag <img> y <p> agregamos un tag <small> para mostrar los géneros.

<small> {{ artist | dash-list }}</small>

Listo, como podemos ver la manera de insertar un filtro en una expresión es con la sintaxis {{ valor | filtro }}. De hecho se podrían agregar N cantidad de filtros y estos van a ir ejecutandose y transformando el valor de manera secuencial: {{ valor | filtro1 | filtro2 | filtro3 }}. En este caso primero se ejecuta filtro1 y el resultado se le pasa como parámetro a filtro2, se ejecuta y se repite el procedimiento con filtro3

🤓 Extras

Para tener une estructura de la aplicación mas consistente. Podemos crear una carpeta filters (al mismo nivel de components), crear un archivo con el nombre dash-list.js, y poner el código de nuestro filtro en ese archivo. Luego nos quedaría hacer un import './filters/dash-list' desde nuestro main.js

Los filtros también pueden ser instalados de manera local, esto quiere decir que en lugar de hacer que todos los componentes de mi aplicación disponga del filtro, debo especificar manualmente en cada componente el o los filtros que quiero disponer.

📝 Solución

⏪ ⏩