Question

我正在此URI xxx.test/employer/search/filter-by上的页面上显示所有记录。我正在使用Algolia搜索来显示所有记录/结果。我添加了一个名为View Profile的按钮，并为其添加了一个名为showProfile的空方法。

当用户单击此按钮时，我想单独在新页面上显示此特定配置文件/记录。如果我自己获取数据，即没有Algolia的代码，我将能够执行此操作，但是在这种情况下，我不确定如何执行此操作。

EmployerSearchComponent.vue：

<ais-instant-search
            :search-client="searchClient"
            index-name="candidate_profiles"
        >
            <ais-search-box v-model="query" class="mb-3" placeholder="Search by job title, company name or city..." />
            <ais-configure
                :restrictSearchableAttributes="['job_title', 'employment_type']"
                :hitsPerPage="25"
            />
            <b-row class="job-search-card">
                <ais-hits class="w-100">

                    <template slot="item" slot-scope="{ item }">
                        <b-col cols="12" class="mb-3">
                            <b-card>
                                <div class="float-right">
                                    <a href="#" v-on:click="showProfile()" class="apply-job-btn btn btn-radius theme-btn apply-it" data-post-id="457" data-user-id="1" title="Apply this job"><i class="flaticon-paper-plane"></i> View Profile</a>
                                </div>
                                <h4 style="margin-bottom: 20px;"><router-link to="/">{{item.job_title}}</router-link></h4>
                                <p>Type: {{item.employment_type}}</p>
                                <b-card-text class="mt-2"><span v-if="item.experience && item.experience.length < 300">{{item.experience}}</span><span v-else>{{item.experience && item.experience.substring(0,300)+"..."}}</span></b-card-text>
                            </b-card>
                        </b-col>
                    </template>

                </ais-hits>

                <ais-pagination />
            </b-row>
        </ais-instant-search>

如果单击控制台中的“网络”选项卡，然后在algolia查询搜索URI上，则可以看到搜索结果位于results [0] .hits中。下面是此数据的屏幕截图。

P.S。我的数据为空，只包含阿尔及利亚客户ID。

如何在新页面上显示一个ID？我知道我需要从显示的记录中获取ID，并将此信息显示在新页面上，但是我不知道如何将它们放在一起。

同样，我认为我需要一条路线，所以我创建了 Route::get('/employer/search/filter-by/show/{id}', 'EmployerSearchController@show')->name('employer.search.show');

我在后端使用Laravel。预先感谢。

-------------------------------------更新：-------- -----------------------------

我觉得我真的很接近，但是死了并转储后，控制器中的$ itemId由于某种原因返回了“未定义”。

router.js（Vue路由器）：

{
                path: '/employer/search/filter-by/:itemId/show',
                name: 'employer-search-index',
                component: SearchIndex,
                meta: {
                    breadcrumb: 'Search Candidates',
                    requiresAuthEmployer: true,
                    employerHasPaid: true
                },
            },

EmployerSearchComponent.vue-使用<router-link>按钮：

<template slot="item" slot-scope="{ item }">
    <b-col cols="12" class="mb-3">
        <b-card>
            <div class="float-right">
                <router-link class="apply-job-btn btn btn-radius theme-btn apply-it" :to="'/employer/search/filter-by/' + item.id + '/show'">View Profile</router-link>
            </div>

            <h4 style="margin-bottom: 20px;"><router-link to="/">{{item.job_title}}</router-link></h4>
            <p>Type: {{item.employment_type}}</p>
            <b-card-text class="mt-2"><span v-if="item.experience && item.experience.length < 300">{{item.experience}}</span><span v-else>{{item.experience && item.experience.substring(0,300)+"..."}}</span></b-card-text>
        </b-card>
    </b-col>
</template>

EmployerSearchController.php：

public function show ($itemId)
    {
        $candidateProfiles = CandidateProfile::with(['user', 'photo', 'resume', 'video'])
        ->where('id', '=', $itemId)->get();

        return Response::json(array(
            'candidateProfiles' => $candidateProfiles,
        ), 200);

    }

api.php：

Route::get('/employer/search/filter-by/{itemId}/show', 'EmployerSearchController@show')->name('employer.search.show');

最后，在显示完整单一配置文件的.vue文件中，我正在加载这样的数据。

mounted() {
            this.loadCandidateProfileData();
        },

methods: {
    loadCandidateProfileData: async function () {
        try {
            const response = await employerService.loadCandidateProfileData();
            this.candidateProfiles = response.data.candidateProfiles;

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

以及上面代码中的loyerService.js文件：

export function loadCandidateProfileData(itemId, data) {
    return http().get(`employer/search/filter-by/${itemId}/show`, data);
}

Answer 1

如您所建议，您将需要一个API端点来从中获取数据，并将其作为JSON对象返回。您需要将一条路由添加到您的客户端路由中，该路由将作业ID（或“子段”）作为parameter。例如，您可以在作业组件中以created()的形式获取路由参数（例如，在$route.params.id方法中），并使用其从API中获取数据。

如果您的Algolia搜索返回了要显示在单个工作清单页面上的所有数据，则可以将其放在Vuex存储中并显示它，而无需发出另一个HTTP请求。不利的一面是，如果用户将页面添加为书签以稍后返回，则存储中将没有数据可显示。

Answer 2

感谢Nilson Jacques的回复。如果您关注我们的对话。最终，我从路由中获取了itemId参数，并将其传递给loadCandidateProfileData()，如下所示：

loadCandidateProfileData: async function() {
                try {
                    const itemId = this.$route.params.itemId;
                    const response = await employerService.loadCandidateProfileData(itemId);

                    this.candidateProfiles = response.data.candidateProfiles;

                    console.log(this.candidateProfiles);

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


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

如何使用Vue js显示单个ID的数据？

2 个答案: