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
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:
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.fakenamegenerator.com/gen-random-br-br.php