Currently, I am working on a project for my university while also learning how to build a single page application through a Udemy course. The issue I'm facing is related to pushing data from a JSON database query named "alunos" to the front end using Vue and Axios. Although I can see the data from the database in the response when I log it, the array remains empty when trying to display it on the template. There are no console errors, but despite my efforts, I have been unable to resolve this issue.
Here is a snippet of the 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>
This is the logic inside AlunoComponent.vue:
<script>
export default {
data(){
return {
aluno:{
nome:'',
nascimento:'',
rga:'',
cpf:'',
rg:'',
instituicao:'',
campus:'',
curso:'',
semestre:''
},
//array for student information
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>
If anyone could provide some guidance, I would greatly appreciate it as I am still new to Vue.js.