Data is displayed in the console but not in Vue - php

Question

I have two tables Session (parent) and Period (child) with a one to many relationship. I'm now trying to display all sessions with periods.
It works fine but my data is only displayed in console and not in Vue.
public function allWithPeriods()
{
$sessions = Session::orderBy('end_date', 'desc')
->with('_periods')
->get();
return response()->json(['sessions' => $sessions]);
}
Session Model
public function periods()
{
return $this->hasMany('App\Period')->with(["course_plans"]);
}
public function _periods()
{
return $this->hasMany('App\Period');
}
Period Model
class Period extends Model
{
public function session()
{
return $this->belongsTo('App\Session');
}
}
Blade
<template>
<div class="container">
<h2 class="text-center p-2 text-white bg-primary mt-5">La liste des Sessions Universitaires</h2>
<v-simple-table>
<template v-slot:default>
<thead>
<tr>
<th class="text-left">#</th>
<th class="text-left">Titre de la session</th>
<th class="text-left">Type</th>
<th class="text-left">Date de début de session</th>
<th class="text-left">Date de cloture de session</th>
<th class="text-left">Actions</th>
</tr>
</thead>
<tbody v-for="session in sessions.data" :key="session.id">
<tr>
<td>
<p class="font-weight-medium">{{session.id}}</p>
</td>
<td>
<p class="font-weight-medium">{{session.name}}</p>
</td>
<td>
<p class="font-weight-medium">{{session.type }}</p>
</td>
<td>
<p class="font-weight-medium">{{session.start_date}}</p>
</td>
<td>
<p class="font-weight-medium">{{session.end_date}}</p>
</td>
<td>
<v-btn color="success" fab x-small dark :to="{ name:'/get_session', params:{ id: session.id } }">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn color="red" fab x-small dark #click.prevent="deleteSession(session.id)">
<v-icon>mdi-delete</v-icon>
</v-btn>
</td>
</tr>
</tbody>
</template>
</v-simple-table>
<pagination :data="sessions" #pagination-change-page="getResults"></pagination>
<v-btn
depressed
color="success"
to="/add_session"
>
<v-icon left>mdi-plus</v-icon>
Ajouter
</v-btn>
</div>
</template>
<script>
export default {
name:'sessions',
data() {
return {
url: document.head.querySelector('meta[name="url"]').content,
sessions: {},
}
},
created() {
this.loadData();
},
mounted() {
console.log('session component mounted ');
},
methods: {
loadData() {
let url = this.url + '/api/session/get';
axios.get(url)
.then(response => {
this.sessions = response.data;
console.log(this.sessions);
}).catch(error => {
console.log(error)
});
},
getResults(page = 1) {
axios.get('http://localhost:8000/api/session/get?page=' + page)
.then(response => {
this.sessions = response.data;
});
},
deleteSession(id) {
let url = this.url + `/api/session/delete_session/${id}`;
this.axios.delete(url)
.then(response => {
if (response.status) {
this.$utils.showSuccess('success', response.message);
this.loadData();
} else {
this.$utils.showError('Error', response.message);
}
});
}
},
}
</script>

Answer 1

First of all, you should define your sessions data as an array, not as an object. Otherwise, you could face some reactivity issues.
So instead of this:
data() {
return {
url: document.head.querySelector('meta[name="url"]').content,
sessions:{}
}
},
you should declare your sessions as:
data() {
return {
url: document.head.querySelector('meta[name="url"]').content,
sessions:[]
}
},
On the other hand, you are iterating over sessions.data instead of sessions. If you take a look at your developer console you will probably notice that there is no .data within sessions.
Saying that you should iterate in this way
<tbody v-for="session in sessions" :key="session.id">
...
</tbody>