Как отобразить данные из нескольких таблиц в vue js и Laravel? - PullRequest
Новая
       6

Как отобразить данные из нескольких таблиц в vue js и Laravel?

0 голосов
/ 14 апреля 2020

Я пытаюсь отобразить данные из трех таблиц в моей базе данных на одной странице. Мне удалось это сделать, все работает так, как я хочу, но у меня есть ошибка: Error in render: "TypeError: Cannot read property 'file' of undefined"

Кажется, что я получаю эту ошибку при попытке получить данные видео без использования v -для oop. Можно ли отображать данные на странице без использования v-for l oop?

Вот мой код.

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