Cómo usar filtros en una aplicación Vue.js para principiantes

Los filtros son en realidad una función proporcionada por Vue.js que le permite aplicar un formato de texto común a sus datos. Los filtros NO cambian los datos en sí, sino que cambian la salida al navegador al devolver una  versión filtrada  de esos datos.

La mayoría de los desarrolladores de VueJS están extremadamente familiarizados con las propiedades computadas. Son una excelente manera de diseñar un código más legible y ordenar su plantilla.

Sin embargo, en ciertos casos, hay una solución mejor que puede hacer que el código sea aún más reutilizable: los filtros VueJS. En este tutorial, aprenderá a usar filtros Vue.js personalizados dentro del componente Vue.

Cómo usar filtros en una aplicación Vue.js

Supongamos que ha creado un filtro personalizado ( uppercase) que transforma el texto en mayúsculas. Puede ser un filtro global o local.

Ahora, así es como podemos usar filtros: ya sea en interpolaciones de bigote  Hey {{ username | capitalize }} O en una expresión v-bind (observe la tubería en ambos).

<!--  With  mustache  interpolations  -->
<h1>{{  article.title  |  uppercase }}</h1>

<!--  With  v-bind  expression  -->
<title-component  :title="article.title  |  uppercase"  />

Puede definir un filtro como global (disponible en todos los componentes) o local (solo en el componente en el que está definido). Así es como definiría un  filtro local :

export  default  {
  filters:  {
    capitalize:  function(value)  {
      if  (!value)  {
        return  "";
      }
      value  =  value.toString();
      return  value.charAt(0).toUpperCase()  +  value.slice(1);
    }
  }
};

Definición de un filtro global en Vue.js

Cree un archivo separado donde almacene sus filtros. Para proyectos pequeños, generalmente los almacenaba en una carpeta llamada  helpers.

import  Vue  from  "vue";

Vue.filter("capitalize",  function(value)  {
  if  (!value)  {
    return  "";
  }
  value  =  value.toString();
  return  value.charAt(0).toUpperCase()  +  value.slice(1);
});

Luego, simplemente importe este archivo en su punto de entrada de Vue (generalmente:  main.js).

import  "@/helpers/filters";

Filtros de encadenamiento

También es posible aplicar múltiples filtros a un solo valor.

Esto es bastante intuitivo. Todo lo que tenemos que hacer es insertar otro "tubo" después de nuestro primer filtro y luego declarar nuestro segundo filtro. Algo como esto.

<h1>{{ name | upper | lower }}</h1>

Ahora, ambas transformaciones de texto se aplican a nuestros datos originales.

Pasar argumentos a filtros

Dado que los filtros son funciones de JavaScript, aceptan el valor a transformar como primer parámetro. También puede pasar tantos argumentos como necesite de acuerdo con las necesidades de su aplicación.

<h1>{{ message | filterA('arg1', arg2) }}</h1>

Así como podemos pasar varios argumentos, es posible vincular varios filtros, para eso solo necesitamos usar el símbolo de barra vertical (|) y a través de varios filtros transformantes, obtenemos un solo valor.