Como fazer filtro de busca em tabela?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Como fazer filtro de busca em tabela?
Da mesma maneira que você aprendeu a criar um filtro de busca para fotos. Já chegou nessa parte do curso?
Confira nesta aula. Mas se não vez as aulas anteriores, faça para que consiga compreender o código desse capítulo.
Sim, cheguei.
Criei uma componente e não utilizei API, ocorreu um erro no momento que eu apliquei tableInfosFiltro que está em computed dentro do v-for da tr.
Quando altero de tableInfos para tableInfosFiltro a tr e td somem.
O que pode estar errado?
Segue código para análise:
| Nome | Data de Nascimento | R.G | Sexo | Endereço | Actions |
|---|---|---|---|---|---|
| {{tableInfo.nome}} | {{ tableInfo.dataNascimento }} | {{ tableInfo.rg }} | {{ tableInfo.sexo }} | {{ tableInfo.endereco }} | edit delete |
Sim, cheguei.
Criei uma componente e não utilizei API, ocorreu um erro no momento que eu apliquei tableInfosFiltro que está em computed dentro do v-for da tr.
Quando altero de tableInfos para tableInfosFiltro a tr e tds somem.
O que pode estar errado?
Segue código para análise:
<template>
<div class="container">
<div class="row">
<div class="col-12">
<h3>{{ tituloTable }}</h3>
</div>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Data de Nascimento</th>
<th scope="col">R.G</th>
<th scope="col">Sexo</th>
<th scope="col">Endereço</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="tableInfo of tableInfos">
<th scope="row">{{tableInfo.nome}}</th>
<td> {{ tableInfo.dataNascimento }} </td>
<td> {{ tableInfo.rg }} </td>
<td> {{ tableInfo.sexo }} </td>
<td> {{ tableInfo.endereco }} </td>
<td>
<i class="material-icons">edit</i>
<i class="material-icons">delete</i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data () {
return {
tituloTable: 'Listagem Alunos',
tableInfos: [
{
nome: 'Saulo Jordao',
dataNascimento: '02/05/2001',
rg: '27.441.277-9',
sexo: 'Masculino',
endereco: 'R Da minha casa, 1000 - Tubalina - Uberlândia-MG'
},
{
nome: 'Manuel Augusto',
dataNascimento: '28/03/1982',
rg: '27.441.277-9',
sexo: 'Masculino',
endereco: 'R Da minha casa, 1000 - Tubalina - Uberlândia-MG'
},
{
nome: 'JOão da Silva',
dataNascimento: '09/09/2000',
rg: '00.000.000-0',
sexo: 'Masculino',
endereco: 'R Da minha casa, 1000 - Tubalina - Uberlândia-MG'
},
{
nome: 'Joana Junqueira',
dataNascimento: '18/03/1992',
rg: '00.000.000-0',
sexo: 'Masculino',
endereco: 'R Da minha casa, 1000 - Tubalina - Uberlândia-MG'
}
],
filtro: '',
}
},
computed: {
tableInfosFiltro () {
if(this.filtro) {
return [];
} else {
this.tableInfos;
}
}
}
}
</script>