Como usar filtros em um aplicativo Vue.js para iniciantes

Os filtros são, na verdade, um recurso fornecido pelo Vue.js que permite aplicar formatação de texto comum aos seus dados. Os filtros NÃO alteram os dados em si, mas alteram a saída para o navegador, retornando uma  versão filtrada  desses dados.

A maioria dos desenvolvedores VueJS está extremamente familiarizada com propriedades computadas. Eles são uma ótima maneira de criar um código mais legível e organizar seu modelo.

No entanto, em certos casos, há uma solução melhor que pode tornar o código ainda mais reutilizável: Filtros VueJS. Neste tutorial, você aprenderá como usar filtros Vue.js personalizados dentro do componente Vue.

Como usar filtros em um aplicativo Vue.js

Vamos supor que você tenha criado um filtro personalizado ( uppercase) que transforma o texto em letras maiúsculas. Pode ser um filtro global ou local.

Agora, aqui está como podemos usar filtros: ou em interpolações bigode  Hey {{ username | capitalize }} OU em uma expressão v-bind (observe o pipe em ambos).

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

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

Você pode definir um filtro como global (disponível em todos os componentes) ou local (somente no componente em que está definido). Aqui está como você definiria um  filtro local :

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

Definindo um Filtro Global no Vue.js

Crie um arquivo separado onde você armazena seus filtros. Para projetos pequenos, geralmente os armazeno em uma pasta chamada  helpers.

import  Vue  from  "vue";

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

Em seguida, basta importar este arquivo para o seu ponto de entrada do Vue (geralmente:  main.js).

import  "@/helpers/filters";

Filtros de Encadeamento

Também é possível aplicar vários filtros a um único valor.

Isso é bastante intuitivo. Tudo o que precisamos fazer é inserir outro “pipe” após nosso primeiro filtro e, em seguida, declarar nosso segundo filtro. Algo assim.

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

Agora, ambas as transformações de texto são aplicadas aos nossos dados originais.

Passando Argumentos para Filtros

Como os filtros são funções JavaScript, eles aceitam o valor a ser transformado como primeiro parâmetro. Você também pode passar quantos argumentos precisar de acordo com as necessidades do seu aplicativo.

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

Assim como podemos passar vários argumentos, é possível vincular vários filtros, para isso basta usarmos a barra vertical (|) e através de vários filtros transformadores, obtemos um único valor.