title: Populating HTML table rows with objects containing an array using Vue
body: <p>I'm trying to populate rows in an HTML table using the Vue framework - the data is as seen below:</p>
  
  <pre><code>TeamRows: [
              { team: 'One', times: ['1', '2', '3'] },
              { team: 'Two', times: ['4', '5', '6'] },
              { team: 'Three', times: ['7', '8', '9'] }
            ]
  </code></pre>
  
  <p>I've tried following this <a href="https://codepen.io/anon/pen/YpRpeq" rel="nofollow noreferrer">codepen</a>, but with bad result - this is my HTML:</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;tr v-for="(row, rindex) in teamRows"&gt;
        &lt;td&gt;{{rindex}}&lt;/td&gt;
           &lt;template&gt;
              &lt;cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex"&gt;&lt;/cell&gt;
           &lt;/template&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;template id="template-cell"&gt;
     &lt;td&gt;{{ value }}&lt;/td&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And this is the Vue component:</p>
  
  <pre><code>Vue.component('cell', {
      template: '#template-cell',
      name: 'row-value',
      props: ['value', 'vindex', 'rindex']
  });
  </code></pre>
  
  <p>I would like the <code>team</code> to go in the first column in a row and the <code>times</code> to follow along in as many columns as there are <code>times</code>. Hope someone with more Vue knowledge is able to help me out here. Cheers.</p>