title: Vue - Using v-for twice to render a tables rows and cells?
body: <p>I would like to use Vue to render a table with rows but have the cells as a component.</p>
  <p>I have made <a href="http://codepen.io/craigvantonder/pen/RoqrLO" rel="nofollow noreferrer">a working example</a> of what I would like to see as the end result and have some code relating to how I think that I could go about this:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div id=&quot;app&quot;&gt;
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Row&lt;/th&gt;
          &lt;th&gt;ID&lt;/th&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Age&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for=&quot;(row, rindex) in people&quot;&gt;
          &lt;td&gt;{{ rindex }}&lt;/td&gt;
          &lt;cell v-for=&quot;(value, vindex, rindex) in row&quot; :value=&quot;value&quot; :vindex=&quot;vindex&quot; :rindex=&quot;rindex&quot;&gt;&lt;/cell&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;template id=&quot;template-cell&quot;&gt;
      &lt;td&gt;{{ value }}&lt;/td&gt;
    &lt;/template&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>// Register component
  Vue.component('cell', {
    template: '#template-cell',
    name: 'row-value',
    props: ['value', 'vindex', 'rindex']
    // In here I would like to access value, vindex and rindex
  });
  // Start application
  new Vue({
    el: '#app',
    data: {
      people: [
        {id: 3, name: 'Bob', age: 27},
        {id: 4, name: 'Frank', age: 32},
        {id: 5, name: 'Joe', age: 38}
      ]
    }
  });
  </code></pre>
  <p>This is because, in the Vue <a href="https://v2.vuejs.org/v2/guide/list.html#Object-v-for" rel="nofollow noreferrer">documentation on v-for</a> they show the example:</p>
  <pre><code>And another for the index:
  
  &lt;div v-for=&quot;(value, key, index) in object&quot;&gt;
    {{ index }}. {{ key }} : {{ value }}
  &lt;/div&gt;
  </code></pre>
  <p>So logically thinking, I should be able to get the rows index in the cell component without too much issue but <a href="http://codepen.io/craigvantonder/pen/KNrMgY" rel="nofollow noreferrer">this is not so</a> as it comes up with a bunch of errors indicating that the values are undefined.</p>
  <p>If anyone could point me in the right direction here then I would be greatly appreciate it as I'm out of ideas with this problem but would really like to understand how to implement this correctly.</p>
  <p>(Note: the reason for me wanting to render the cells in the component is to register the change of values, <a href="https://stackoverflow.com/a/41135610/2110294">see the answer</a> to another question that I asked here if you're interested)</p>