时间戳

首页 > 解决方案 > 循环内的Vue组件

javascript - 循环内的Vue组件

问题描述

我觉得这个问题有点傻，但老实说我现在无法自己找到它。

我的问题是当我尝试使用

…
<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，并且没有更多错误。

标签： javascriptvuejs2vue-component

解决方案

好吧，当你使用 DOM 模板时，你应该看看DOM Template Parsing Caveats

为了使您的示例正常工作，您应该使用 a 中的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"
});

推荐阅读