title: VueJS - passing data from a v-for to a component, and then to another component
body: <p>I have a <code>&lt;header-row&gt;</code> component which I put at the top of all pages to show a title and a subtitle. This is what I'm wanting to do:</p>
  
  <ul>
  <li>Show a list of objects from an array, with each item "clickable" to show that item's detail on a separate page (this part is easy)</li>
  <li>Pass a field of the item (like <code>item.display</code>) from the list to the next page as a <code>prop</code> </li>
  <li>In the new page, use that prop in my <code>&lt;header-row&gt;</code> component to show the title for that page. </li>
  </ul>
  
  <p>Seems simple, but I can't get the last two steps working:</p>
  
  <h1>Header Component:</h1>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;h3 class='text-primary'&gt;{{ title }}&lt;/h3&gt;
      &lt;h5 class='text-muted'&gt;{{ subTitle }}&lt;/h5&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: [
      'title',
      'subTitle'
    ]
  }
  &lt;/script&gt;
  </code></pre>
  
  <h1>List items:</h1>
  
  <pre><code>&lt;router-link v-for="item in items" :to="{ name: 'some-page' } myProp="item.name"&gt;
      {{ item.display }}
  &lt;/router-link&gt;
  </code></pre>
  
  <h1>Child Component</h1>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;header-row title="myProp"&gt;&lt;/header-row&gt;
      &lt;div class='container-fluid'&gt;
        &lt;div class='row'&gt;
          &lt;div class='col-4'&gt;
            ... stuff here....
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'child-stuff',
    props: [
      'myProp'
    ]
  }
  &lt;/script&gt;
  </code></pre>
  
  <h1>Routing Code:</h1>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  
  import Dashboard from '@/views/Dashboard'
  ... more here ....
  import AROverview from '@/views/ar/Overview'
  import Invoice from '@/views/ar/Invoice'
  import APOverview from '@/views/ap/Overview'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'dashboard',
        component: Dashboard
      },
      {
        path: '/receivables/:id',
        name: 'ar',
        component: AROverview
      },
      {
        path: '/invoice/:id',
        name: 'invoice',
        component: Invoice
      },
      ... more ...
      {
        path: '/payables/:id',
        name: 'ap',
        component: APOverview
      }
    ]
  })
  </code></pre>