如何在Vue JS和Laravel中显示多个表中的数据？

Question

我试图在一页上显示数据库中三个表的数据。我已经做到了，一切都按照我想要的方式工作，但出现错误：Error in render: "TypeError: Cannot read property 'file' of undefined"

在尝试不使用v-for循环检索视频数据时，似乎出现此错误。 是否可以在不使用v-for循环的情况下在页面上显示数据？

这是我的代码。

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>
                            &nbsp;
                            <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');
}