循环内的Vue组件

Question

我认为这个问题有点愚蠢，但老实说，我暂时无法自己找到问题。

我的问题是当我尝试使用

渲染一堆组件时

…
<tbody v-for="body in bodies">
    <row-c v-for="row in body.rows">
…

bodies是

bodies: [
    {
        someOther: 'smth',
        rows: [
            {title: 'b1r1'},
            {title: 'b1r2'},
            {title: 'b1r3'}
        ]
    },
    {
        someOther: 'smthElse',
        rows: [
            {title: 'b2r1'},
            {title: 'b2r2'},
            {title: 'b2r3'}
        ]
    }
]

我遇到错误

[Vue warn]: Error in render: 'TypeError: body is undefined'

CodePen example with error

但是没有组件，它可以工作：CodePen example without error。

当然，我读过错误消息中的docs，但不了解如何更改代码。请给我建议：）

谢谢。

UPD

我刚刚根据first codepen更新了Giovane's answer，并且其中没有更多错误。

Answer 1

好吧，在使用DOM模板时，您应该看看DOM Template Parsing Caveats

为了使示例工作，您应该在is中使用属性<tr>：

<tbody v-for="body in bodies">
  <tr is="row-c" v-for="row in body.rows" v-bind:row="row"></tr>
</tbody>

并在row中添加row-c道具：

Vue.component('row-c', {
  props: ['row'],
  data: function() {
    return {
      body: ''
    }
  },
  template: "#row-c-template"
});