Как загрузить данные на основе идентификатора, используя Vue js и Laravel?

Question

У меня есть таблица под названием candid_profiles со следующими столбцами:

'user_id', 'photo_id', 'resume_id', 'video_one_id', 'video_two_id', 
'video_three_id', 'date_of_birth', 'employment_type', 'experience','skills'

У меня есть страница /employer/search, которая отображает все профили из этой таблицы. Я использую paginate для отображения 5 записей на странице. Внизу у меня есть кнопка «Загрузить еще», при нажатии появляются еще 5 (или меньше) профилей. Если их больше, вы все равно увидите кнопку «Загрузить еще», иначе она исчезнет.

Вот как я выбираю данные.

EmployerSearchController. php file:

public function search()
{
    $candidateProfile = CandidateProfile::orderBy('created_at', 'asc')->paginate(5);

    $user = User::all()->where('id', $candidateProfile->first()->user_id);

    $videoOne = Video::all()->where('id', $candidateProfile->first()->video_one_id);
    $videoTwo = Video::all()->where('id', $candidateProfile->first()->video_two_id);
    $videoThree = Video::all()->where('id', $candidateProfile->first()->video_three_id);
    $resumes = Resume::all()->where('id', $candidateProfile->first()->resume_id);
    $photos = Photo::all()->where('id', $candidateProfile->first()->photo_id);

    return response()->json(array($candidateProfile, $videoOne, $videoTwo, $videoThree, $resumes, $photos, $user), 200);

}

И вот как я назначаю данные в переменную и создаю функцию Load More в моем интерфейсе Vue js код:

methods: {
        loadCandidateProfileData: async function() {
            try {
                const response = await employerService.loadCandidateProfileData();
                this.resumes = response.data[4];
                this.video_one = response.data[1];
                this.video_two = response.data[2];
                this.video_three = response.data[3];
                this.photos = response.data[5];
                this.users = response.data[6];

                this.candidateProfiles = response.data[0].data;

                if (response.data[0].current_page < response.data[0].last_page) {
                    this.moreExists = true;
                    this.nextPage = response.data[0].current_page + 1;
                } else {
                    this.moreExists = false;
                }

                // console.log(JSON.stringify(response.data, undefined, 4));

            } catch (error) {
                this.$toast.error("Some error occurred, please refresh!");
            }
        },

Проблема заключается в следующем потому что я загружаю видео, резюме и фотографию из их соответствующих таблиц, я не получаю правильную информацию, потому что она не запрашивает правильный идентификатор.

Если все данные получены из 1 таблицы I не было бы этой проблемы, но я выбираю данные из нескольких таблиц.

Как я могу таким образом получить правильные данные для каждой записи candid_profile?

Answer 1

Вы можете использовать отношения в модели CandidateProfile. Смотрите здесь https://laravel.com/docs/7.x/eloquent-relationships. Так, например, с пользователем вы можете иметь в своей модели CandidateProfile

public function user()
{
    // You can choose the relationship that best suits your need for the users table
    return $this->belongsTo(User::class);
}

, и при запросе вы можете получить эти отношения по

 $candidateProfile = CandidateProfile::with('users')->orderBy('created_at', 'asc')->paginate(5);

, тогда вы можете получить доступ к этим пользователям по

$candidateProfile->users

То же самое можно применить к другим отношениям в таблице (видео, резюме, фотографии).

Затем вы можете просто передать $candidateProfile обратно на ваш vue js