title: How to show data of a single id using Vue js?
body: <p>I'm displaying all records on a page at this URI <code>xxx.test/employer/search/filter-by</code>. I'm using Algolia Search to display all of the records/results. I added a button called <code>View Profile</code> and attached an empty method to it called <code>showProfile</code>.</p>
  
  <p>When a user clicks on this button, I want to display this specific profile/record on a new page by itself. If I was fetching data on my own, i.e. without Algolia's code I would be able to do this, but in this case I'm not really sure how to do this.</p>
  
  <p>EmployerSearchComponent.vue:</p>
  
  <pre><code>&lt;ais-instant-search
              :search-client="searchClient"
              index-name="candidate_profiles"
          &gt;
              &lt;ais-search-box v-model="query" class="mb-3" placeholder="Search by job title, company name or city..." /&gt;
              &lt;ais-configure
                  :restrictSearchableAttributes="['job_title', 'employment_type']"
                  :hitsPerPage="25"
              /&gt;
              &lt;b-row class="job-search-card"&gt;
                  &lt;ais-hits class="w-100"&gt;
  
                      &lt;template slot="item" slot-scope="{ item }"&gt;
                          &lt;b-col cols="12" class="mb-3"&gt;
                              &lt;b-card&gt;
                                  &lt;div class="float-right"&gt;
                                      &lt;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"&gt;&lt;i class="flaticon-paper-plane"&gt;&lt;/i&gt; View Profile&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;h4 style="margin-bottom: 20px;"&gt;&lt;router-link to="/"&gt;{{item.job_title}}&lt;/router-link&gt;&lt;/h4&gt;
                                  &lt;p&gt;Type: {{item.employment_type}}&lt;/p&gt;
                                  &lt;b-card-text class="mt-2"&gt;&lt;span v-if="item.experience &amp;&amp; item.experience.length &lt; 300"&gt;{{item.experience}}&lt;/span&gt;&lt;span v-else&gt;{{item.experience &amp;&amp; item.experience.substring(0,300)+"..."}}&lt;/span&gt;&lt;/b-card-text&gt;
                              &lt;/b-card&gt;
                          &lt;/b-col&gt;
                      &lt;/template&gt;
  
                  &lt;/ais-hits&gt;
  
                  &lt;ais-pagination /&gt;
              &lt;/b-row&gt;
          &lt;/ais-instant-search&gt;
  
  </code></pre>
  
  <p>If I click on the network tab in the console, and on the algolia query search URI, I can see that the search results are in results[0].hits. Below is a screenshot of this data.</p>
  
  <p><a href="https://i.stack.imgur.com/92cOL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/92cOL.jpg" alt="enter image description here"></a></p>
  
  <p>P.S. My data is empty it just contains algolia client ID's.</p>
  
  <p>How can I display a single id on a new page? I understand that I need to get the id from the record that is being displayed, and show this information on a new page, but I don't know how to put it all together.</p>
  
  <p>Again I think I'll need a route, so I created this
  <code>Route::get('/employer/search/filter-by/show/{id}', 'EmployerSearchController@show')-&gt;name('employer.search.show');</code></p>
  
  <p>I'm using Laravel for my backend. Thanks in advance.</p>
  
  <p>------------------------------------- UPDATED: -------------------------------------</p>
  
  <p>I feel like I'm really close, but $itemId in my controller after I die and dump returns "undefined" for some reason.</p>
  
  <p>router.js (Vue Router):</p>
  
  <pre><code>{
                  path: '/employer/search/filter-by/:itemId/show',
                  name: 'employer-search-index',
                  component: SearchIndex,
                  meta: {
                      breadcrumb: 'Search Candidates',
                      requiresAuthEmployer: true,
                      employerHasPaid: true
                  },
              },
  </code></pre>
  
  <p>EmployerSearchComponent.vue - with the <code>&lt;router-link&gt;</code> button:</p>
  
  <pre><code>&lt;template slot="item" slot-scope="{ item }"&gt;
      &lt;b-col cols="12" class="mb-3"&gt;
          &lt;b-card&gt;
              &lt;div class="float-right"&gt;
                  &lt;router-link class="apply-job-btn btn btn-radius theme-btn apply-it" :to="'/employer/search/filter-by/' + item.id + '/show'"&gt;View Profile&lt;/router-link&gt;
              &lt;/div&gt;
  
              &lt;h4 style="margin-bottom: 20px;"&gt;&lt;router-link to="/"&gt;{{item.job_title}}&lt;/router-link&gt;&lt;/h4&gt;
              &lt;p&gt;Type: {{item.employment_type}}&lt;/p&gt;
              &lt;b-card-text class="mt-2"&gt;&lt;span v-if="item.experience &amp;&amp; item.experience.length &lt; 300"&gt;{{item.experience}}&lt;/span&gt;&lt;span v-else&gt;{{item.experience &amp;&amp; item.experience.substring(0,300)+"..."}}&lt;/span&gt;&lt;/b-card-text&gt;
          &lt;/b-card&gt;
      &lt;/b-col&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>EmployerSearchController.php:</p>
  
  <pre><code>public function show ($itemId)
      {
          $candidateProfiles = CandidateProfile::with(['user', 'photo', 'resume', 'video'])
          -&gt;where('id', '=', $itemId)-&gt;get();
  
          return Response::json(array(
              'candidateProfiles' =&gt; $candidateProfiles,
          ), 200);
  
      }
  </code></pre>
  
  <p>api.php:</p>
  
  <pre><code>Route::get('/employer/search/filter-by/{itemId}/show', 'EmployerSearchController@show')-&gt;name('employer.search.show');
  </code></pre>
  
  <p>And Finally, in the .vue file that shows the Full Single Profile, I'm loading the data like this.</p>
  
  <pre><code>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!");
          }
      },
  }
  </code></pre>
  
  <p>And the employerService.js file from the above code:</p>
  
  <pre><code>export function loadCandidateProfileData(itemId, data) {
      return http().get(`employer/search/filter-by/${itemId}/show`, data);
  }
  </code></pre>