table is not displaying, when i pull data from database - laravel

Question

this is my table which is soppose to display subject details from the database
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr>
<th>ID</th>
<th>Subject Code</th>
<th>Subject Name</th>
<th>Credit Hours</th>
<th>Created_at</th>
<th>Action</th>
</tr>
<tr v-for="subject in subjects" :key="subject.id">
<td>{{ subject.id }}</td>
<td>{{ subject.code | capitalize}}</td>
<td>{{ subject.name }}</td>
<td>{{subject.credit_hours}}</td>
<td>{{ subject.created_at |datetime }}</td>
<td>
<!-- Edit User -->
<a href="#" #click="editModal(subject)">
<i class="fa fa-edit text-green"></i>
</a>
<!-- Delete User -->
<a href="#" #click="deleteSubject(subject.id)">
<i class="fa fa-trash text-red"></i>
</a>
</td>
</tr>
this is my vuejs code to get data from subjectcontroller#index
<script>
import { Form, HasError, AlertError } from 'vform'
export default {
data () {
return {
editmode : false,
subjects: {}
form: new Form({
id: '',
subject_code: '',
subject_name: '',
credit_hours: '',
})
}
},
methods:{
loadSubjects(){
axios.get("api/subject")
.then(
({data}) => (this.subjects = data.data)
);
}
},
created(){
this.loadSubjects();
}
}
</script>
this is the code from subjectController#index
public function index()
{
$subjects = Subject::latest();
return $subjects->get();
}
the subject data displays in the consoles Network.XHR,
there are no console errors or warning
Any help will be appreciated

Answer 1

I was facing the same problem recently. Inside the axios module, try the following:
axios
.get("api/subject")
.then(response => (this.subjects = response.data));