含使用Vue的

Question

我想填充在使用Vue公司框架的HTML表行的数组对象填充HTML表行 - 将数据，如下图所示：

TeamRows: [ 
      { team: 'One', times: ['1', '2', '3'] }, 
      { team: 'Two', times: ['4', '5', '6'] }, 
      { team: 'Three', times: ['7', '8', '9'] } 
      ] 

我已经试过这之后codepen，但坏的结果 - 这是我的HTML：

<tbody> 
    <tr v-for="(row, rindex) in teamRows"> 
     <td>{{rindex}}</td> 
     <template> 
      <cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell> 
     </template> 
    </tr> 
</tbody> 
</table> 
<template id="template-cell"> 
    <td>{{ value }}</td> 
</template> 

这是Vue的组件：

Vue.component('cell', { 
    template: '#template-cell', 
    name: 'row-value', 
    props: ['value', 'vindex', 'rindex'] 
}); 

我希望team连续排在第一列，times跟在times的列中。希望有更多Vue知识的人能够帮助我。干杯。