Array is empty in VueJs from Axios GET response | VUEJS/LARAVEL

Question

Im learning how to do a single page application with a udemy course while trying to do a uni project. The problem is, in my controller I'm sending my db query as a json "alunos" to the front end. Now, in Vue, if I only put axios.get and console.log(response) I can see that my data from db is there, however when I try to push that data to my array so I can display on the template it's still empty, console returns no error. I'm searching everywhere but still can't get it to work.

AlunoComponent.vue template

<template>
<div>

    <button class="btn btn-primary btn-block">Add Novo Aluno</button>

    <table class="table" v-if="alunos">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">RGA</th>
                <th scope="col">Nome</th>
                <th scope="col">Instituição</th>
                <th scope="col">Campus</th>
                <th scope="col">Curso</th>
                <th scope="col">Semestre</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <th v-for="aluno in alunos" v-bind:key="aluno.id" scope="row" >1</th>
                {{alunos}}
                <td>{{aluno.id}}</td>
                <td>{{aluno.rga}}</td>
                <td>{{aluno.nome}}</td>
                <td>{{aluno.instituicao}}</td>
                <td>{{aluno.campus}}</td>
                <td>{{aluno.curso}}</td>
                <td>{{aluno.semestre}}</td>
                <td><button class="btn btn-info">Edit</button></td>
                <td><button class="btn btn-danger">Delete</button></td>
            </tr>   
        </tbody>
        </table>

</div>

Logic inside AlunoComponent.vue

   <script>
    export default {

        data(){

            return {

                aluno:{
                    nome:'',
                    nascimento:'',
                    rga:'',
                    cpf:'',
                    rg:'',
                    instituicao:'',
                    campus:'',
                    curso:'',
                    semestre:''
                },
                //vetor pras infos
                alunos:[],
                uri: '/alunos'

            }
        },

        methods:{

            loadAlunos(){

                    axios
                    .get(this.uri)
                    .then(response=>{

                    //console.log(response.data)
                    this.alunos = response.data.alunos
                }).catch(error => {
                  console.log(error)
                });
            }
        },

        mounted() {

            this.loadAlunos();
            console.log('Component mounted.')
        }
    }
</script>

Can somebody help me? I'm still a beginner to vue js

Answer 1

Your table template looks incorrect. You want something like this:

<tbody>
    <tr v-for="aluno in alunos" :key="aluno.id" scope="row">
        <td>{{aluno.id}}</td>
        <td>{{aluno.rga}}</td>
        <td>{{aluno.nome}}</td>
        <td>{{aluno.instituicao}}</td>
        <td>{{aluno.campus}}</td>
        <td>{{aluno.curso}}</td>
        <td>{{aluno.semestre}}</td>
        <td><button class="btn btn-info">Edit</button></td>
        <td><button class="btn btn-danger">Delete</button></td>
    </tr>   
</tbody>

The current template will produce something like this, if there are 5 elements in alunos:

<tbody>
    <tr>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        <th>1</th>
        {{alunos}}
        <td>{{aluno.id}}</td>
        <td>{{aluno.rga}}</td>
        <td>{{aluno.nome}}</td>
        <td>{{aluno.instituicao}}</td>
        <td>{{aluno.campus}}</td>
        <td>{{aluno.curso}}</td>
        <td>{{aluno.semestre}}</td>
        <td><button class="btn btn-info">Edit</button></td>
        <td><button class="btn btn-danger">Delete</button></td>
    </tr>   
</tbody>

Another tip, if you want to hide the table when the alunos array is empty, v-if="alunos" doesn't work because [] is truthy, and alunos is initialized as []. v-if="alunos.length" is what you're going for I believe.