Filtro de busca 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.

https://cursos.alura.com.br/course/vue-parte1/task/23272

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:

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>