循环内的Vue组件

时间:2018-10-13 13:11:18

标签: javascript vuejs2 vue-component

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

我的问题是当我尝试使用

渲染一堆组件时
…
<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,并且其中没有更多错误。

1 个答案:

答案 0 :(得分:2)

好吧,在使用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"
});