How to display data from multiple tables in vue js and Laravel? - mysql

Question

I'm trying to display data from three tables in my database on one page. I've managed to do it, everything is working the way I want but I have an error: Error in render: "TypeError: Cannot read property 'file' of undefined"
It seems like I'm getting this error when trying to retrieve the videos data WITHOUT using a v-for loop.
Is it possible to display data on a page without using a v-for loop?
Here is my code.
CandidateProfileController.php:
public function index()
{
$videos = Video::all();
$resumes = Resume::all();
$profile = CandidateProfile::all();
return Response::json(array(
'videos' => $videos,
'resumes' => $resumes,
'profiles' => $profile
));
}
CandidateProfileIndex.vue:
<template>
<div class="col-md-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<h3 class="card-title">My Profile</h3>
<b-container class="bv-example-row">
<b-row>
<b-embed
type="video"
aspect="16by9"
:src="`${$store.state.serverPath}/storage/videos/${videos[0].file}`"
allowfullscreen
controls
></b-embed>
</b-row> <br>
<b-row>
<b-col class="text-right" cols="8"></b-col>
<b-col class="text-right" cols="2">
<b-embed
type="video"
aspect="16by9"
:src="`${$store.state.serverPath}/storage/videos/${videos[1].file}`"
controls
class="video-thumbnail"
></b-embed>
</b-col>
<b-col class="text-right" cols="2">
<b-embed
type="video"
aspect="16by9"
:src="`${$store.state.serverPath}/storage/videos/${videos[2].file}`"
controls
class="video-thumbnail"
></b-embed>
</b-col>
</b-row>
</b-container>
<br>
<b-container v-for="(profile, index) in profiles" :key="index">
<div class="b-row">
<div class="b-col" v-for="(resume, index) in resumes" :key="index">
<h4 style="float: left;">Resume:</h4>
<span style="font-size: 0.88rem;">{{resume.file}}</span><br><br>
</div>
</div>
<div class="b-row">
<div class="b-col">
<h4>Experience</h4>
<p>{{profile.experience}}</p>
</div>
</div>
<div class="b-row">
<div class="b-col">
<h4>Additional Skills</h4>
<p>{{profile.skills}}</p>
</div>
</div>
</b-container>
</div>
</div>
</div>
</template>
<script>
import * as groupedService from '../../services/grouped_data_service.js';
export default {
name: "candidateProfileIndex",
data() {
return {
profiles: [],
videos: [],
resumes: [],
};
},
mounted() {
this.loadGroupedData();
},
methods: {
loadGroupedData: async function() {
try {
const response = await groupedService.loadGroupedData();
console.log(response);
this.resumes = response.data.resumes;
this.videos = response.data.videos;
this.profiles = response.data.profiles;
console.log(this.resumes);
} catch (error) {
this.$toast.error("Some error occurred, please refresh!");
}
}
}
}
</script>
grouped_data_service.js:
import {http, httpFile} from './http_service';
export function loadGroupedData() {
return http().get('/candidate-profile');
}