Com a nova versão do Vue.js a possibilidade de aplicar filtros no v-for deixou de existir. Porém esse recurso sempre trouxe certa confusão e até mesmo perda de performance.

Isso não é motivo de pânico para ninguém, a alternativa já existia muito antes da remoção desse recurso: computeds properties

Com computeds properties você ganha a habilidade de criar propriedades baseadas em outras propriedades do componente.

Nesse exemplo criamos a propriedade fullName a partir de firstName e lastName. Este é um recurso muito útil e poderoso, além de performático. O Vue.js faz cache do resultado, só alterando ele quando as dependências dele são alteradas (firstName e lastName).

O mesmo procedimento pode ser feito com listas, criando listas dinâmicas a partir de outros dados.

Ordenando

Consumir uma API com Vue.js é muito simples. Dessa vez vamos usar o axios, saiba mais sobre ele em Vue.js e Serviços

Porém essa lista não possui uma ordem definida, nesse momento vamos combinar o poder das computeds properties com a simplicidade e do javascript.

Vamos também usar o lodash para ajudar na tarefa, mesmo que essa seja uma tarefa simples para o um script javascript puro, no dia-a-dia você vai usar bastante esta lib, então vamos praticar com ela.

Foi criada a computed property list e trocamos repos por ela na nossa template. Agora a lista esta esta ordenada por nome, porém podemos deixar isso mais dinâmico.

Agora temos um controle dinâmico da ordenação da lista.

Filtrando

Temos a ordem do nossa lista pronta, agora vamos pesquisar dentro dela.

Agora nós temos a habilidade de ordenar e filtrar nossa lista.

Reaproveitamento

No começo isso pode parecer difícil, até mesmo ruim, porém com um pouco mais de abstração fica bem mais simples.

// helpers/strings.js
import { deburr, isEmpty } from 'lodash';
export const sanitize = deburr;
export const sanitizeAndLower = value => sanitize(value).toLowerCase();
export const contains = (st, value) => sanitizeAndLower(st).indexOf(sanitizeAndLower(value)) > -1;

// helpers/filters/by-prop.js
import { filter } from 'lodash';
import { contains } from '../strings';

export const makeFilterByProp = key => (list, st) => filter(list, row => contains(row[key], st));
export default (key, list, st) => filter(list, row => contains(row[key], st));

// helpers/by-name.js
import { makeFilterByProp } from './by-prop';

export default makeFilterByProp('name');

// an component
import { orderBy, isEmpty } from 'lodash';
import filterByName from '../helpers/filters/by-name';

// omit

computed: {
  listOrdened() {
    const { orderBy as by, order } = this.configs;
    
    return orderBy(this.repos, by, order);
  },
  list() {
    const filter = this.configs.filter;
    if (isEmpty(filter)) {
      return this.listOrdened;
    }

    return filterByName(this.listOrdened, filter);
  },
},

Esse conjunto de scripts prevê os principais problemas na hora de filtrar uma coleção, e deixa tudo abstraído para facilitar o uso em vários locais. Tudo isso é javascript puro e agnóstico, pode ser utilizado em vários locais e situações. Link para o gist aqui.

Participe da comunidade

• https://telegram.me/vuejsbrasil
• http://slack.vuejs-brasil.com.br
• https://www.facebook.com/groups/vuejsbr/
• https://forum.codecasts.com.br/t/vuejs

Se quiser saber mais sobre meu trabalho visite codecasts.com.br. Lá você vai ver vídeos sobre Javascript, jQuery, Gulp, ES6, Vue.JS, Docker e muito mais.