title: Dynamic routing in Vue.js, showing `this.$route.params.id` in html
body: <p>I have a page that uses dynamic routing.</p>
  
  <p>I have a "jobs" page that lists all jobs. One you click one job, it gives you the detail of that one job.</p>
  
  <p>Jobs HTML page uses the following (snippets excludes ul/li tags):</p>
  
  <pre><code>&lt;vue-panel v-for="job in jobs" v-if="filterJob(job)" v-bind:key="job.id"&gt;
  
  Job: {{job.title}}&lt;br&gt;
  Description: {{job.description}}&lt;br&gt;
  Salary: ${{job.salary}}&lt;br&gt;
  Date Posted: {{job.datePosted}}&lt;br&gt;
  
  &lt;router-link :to="`/job/${job.id}`"&gt;Learn More&lt;/router-link&gt;
  </code></pre>
  
  <p>Clicking learn more leads to the correct job page. But how do I dynamically show just that specific job?</p>
  
  <p>In the Job page, within the script I have:</p>
  
  <pre><code>  created() {
      console.log(this.$route.params.id); // prints value of :id
    },
  </code></pre>
  
  <p>Via console log I see that it has access to the correct job page. But it is not dynamically showing that one job on the page. What needs to be in the HTML to access a specific job?</p>
  
  <p>HTML of job page, as of now (excludes the ul/li tags): </p>
  
  <pre><code>&lt;vue-panel v-bind:key="job.id"&gt;
  
  Job: {{job.title}}&lt;br&gt;
  Description: {{job.description}}&lt;br&gt;
  Salary: ${{job.salary}}&lt;br&gt;
  Date Posted: {{job.datePosted}}&lt;br&gt;
  </code></pre>