循環內的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 示例錯誤

但是沒有組件它可以工作： CodePen example without error 。

當然，我已經閱讀了錯誤消息中引用的文檔，但不明白我應該如何更改我的代碼。 請給我建議:)

提前致謝。

UPD

我剛剛根據Giovane 的回答更新了第一個 codepen ，並且沒有更多錯誤。

Answer 1

好吧，當你使用 DOM 模板時，你應該看看DOM Template Parsing Caveats

為了使您的示例正常工作，您應該使用<tr> is的屬性：

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

並在row-c中添加row屬性：

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