Vue - Using v-for twice to render a tables rows and cells?
<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>