Pular para o conteúdo

Programando Soluções

Como fazer filtro em listas com VueJS

vuejs filtro

Introdução

Praticamente todo sistema web tem uma listagem para algo.

E ter o filtro facilita muito para o usuário localizar as informações desejadas, e isso traz uma boa experiência para ele.

E o VueJS tem algumas formas para implementar isso, vamos dar uma olhada em uma das formas de implementação de filtro.

No final teremos um filtro dessa forma:

Tabela e lista

Para esse projeto, achei interessante implementar em uma tabela do BootstrapVue e uma lista porque a forma de renderização é diferente.

É preciso ter um projeto com o BootstrapVue instalado, caso queira ver como fazer, pode ver neste link.

No componente App.vue, separei em duas partes com a row e col do BootstrapVue, e para cada lado, coloquei a tabela e a lista:

    <b-row>
      <b-col md="6" sm="12">
        <!-- tabela -->
        <b-table
          class="mt-3"
          striped
          hover
          :items="items"
          :fields="fields"
        >
          <template #cell(isActive)="data">
            <template v-if="data.item.isActive">Ativo</template>
            <template v-else>Inativo</template>
          </template>
        </b-table>
      </b-col>
      <b-col md="6" sm="12">
        <!-- lista -->
        <ul class="mt-3">
          <li v-for="(item, key) in items" :key="key">
            {{ item.name }} - {{ item.email }}
          </li>
        </ul>
      </b-col>
    </b-row>

E o script que contém os itens a ser renderizado fica dessa forma:

<script>
export default {
  name: "App",
  data() {
    return {
      fields: [
        {
          key: "name",
          label: "Nome",
        },
        {
          key: "email",
          label: "E-mail",
        },
        {
          key: "isActive",
          label: "Status",
        },
      ],
      items: [
        {
          isActive: true,
          name: "Letícia Araujo Pereira",
          email: "LeticiaAraujoPereira@dayrep.com",
        },
        {
          isActive: false,
          name: "Marina Santos Araujo",
          email: "MarinaSantosAraujo@dayrep.com",
        },
        {
          isActive: false,
          name: "Felipe Lima Fernandes",
          email: "FelipeLimaFernandes@dayrep.com",
        },
        {
          isActive: true,
          name: "Thaís Lima Castro",
          email: "ThaisLimaCastro@rhyta.com",
        },
        {
          isActive: true,
          name: "Renan Melo Barros",
          email: "RenanMeloBarros@teleworm.us",
        },
        {
          isActive: true,
          name: "Matilde Pereira Carvalho",
          email: "MatildePereiraCarvalho@rhyta.com",
        },
        {
          isActive: true,
          name: "Gabriel Ferreira Gomes",
          email: "GabrielFerreiraGomes@jourrapide.com",
        },
      ],
    };
  },
};
</script>

Para obter os dados das pessoas, utilizei este gerador de dados fake.

O resultado desse código é esse:

filtro 2

Filtro

Para o filtro, utilizei um formulário inline acima da b-row.

O primeiro campo poderá filtrar por nome ou e-mail, é um input simples. No caso eu coloquei o input do BootstrapVue, mas pode ser utilizado qualquer input.

O segundo campo é um select para selecionar o status do usuário.

E também coloquei um botão com um tooltip para limpar filtro.

    <!-- filtro -->
    <b-form inline>
      <b-form-input
        id="inline-form-input-name"
        class="mb-2 mr-sm-2 mb-sm-0"
        placeholder="Nome ou E-mail"
        v-model="search"
      ></b-form-input>

      <b-form-select
        class="mb-2 mr-sm-2 mb-sm-0"
        v-model="selected"
        :options="options"
      ></b-form-select>

      <b-button title="Limpar filtro" v-b-tooltip.hover @click="clearFilter"
        ><b-icon-trash class="icon"></b-icon-trash
      ></b-button>
    </b-form>

Abaixo dos itens no script, é necessário colocar os campos de controle do filtro.

Para o nome e e-mail, será utilizado a variável search, que conterá o valor da busca, e o select precisa das opções e da variável selected, para ver qual valor está selecionado.

      search: "",
      selected: null,
      options: [
        { value: null, text: "Selecione um status" },
        { value: true, text: "Ativo" },
        { value: false, text: "Inativo" },
      ],

O filtro vai ficar dessa forma:

filtro 3

Funcionamento

Agora, para aplicar o funcionamento, é necessário colocar uma propriedade computada, essa propriedade será computada sempre que tiver alguma alteração no valor de search ou selected, com isso a lista irá reagir ao filtro.

Essa propriedade computada terá as condições de filtragem utilizando o filter do Javascript e retornará a lista sempre filtrada.

Implemente a função dessa forma:

computed: {
    filteredItems() {
      let items = [];
      items = this.items.filter((item) => {
        return (
          item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1 ||
          item.email.toLowerCase().indexOf(this.search.toLowerCase()) > -1
        );
      });

      items = items.filter((item) => {
        if (this.selected == null) return item;
        return item.isActive === this.selected;
      });

      return items;
    },

Agora na tabela e na lista, troque a variável que faz o loop, antes declarada somente como items, agora é necessário trocar para filteredItems.

    <b-row>
      <b-col md="6" sm="12">
        <!-- tabela -->
        <b-table
          class="mt-3"
          striped
          hover
          :items="filteredItems"
          :fields="fields"
        >
          <template #cell(isActive)="data">
            <template v-if="data.item.isActive">Ativo</template>
            <template v-else>Inativo</template>
          </template>
        </b-table>
      </b-col>
      <b-col md="6" sm="12">
        <!-- lista -->
        <ul class="mt-3">
          <li v-for="(item, key) in filteredItems" :key="key">
            {{ item.name }} - {{ item.email }}
          </li>
        </ul>
      </b-col>
    </b-row>

Função limpar filtro

A função de limpar tem uma implementação tranquila.

A lógica para limpar, é retornar o valor das variáveis ao valor inicial.

Implemente o method clearFilter dessa forma:

methods: {
    clearFilter() {
      this.search = "";
      this.selected = null;
    },
  },

Vídeo

Código fonte

O código fonte está no meu CodeSandbox, neste link.

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Referências

https://pt.stackoverflow.com/questions/368341/como-utilizar-filtros-no-vuejs-para-cole%C3%A7%C3%B5es-de-dados

https://pt.fakenamegenerator.com/gen-random-br-br.php

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok