CODEWITHSUNDEEP
javascriptvuejs2vue-component
Storm
Storm

Reputation: 364

Vue components inside cycle

I think this question a bit silly, but I honestly unable to find it out by myself for now.

My problem is when I'm trying to render bunch of components using

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

bodies are

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

I'm getting error

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

CodePen example with error

But without component it works: CodePen example without error.

Of course I've read docs reffered from error message, but haven't understand how should I change my code. Give me advice please :)

Thanks in advance.

UPD

I've just updated first codepen according to Giovane's answer, and there are no more errors in it.

Upvotes: 1

Views: 97

Answers (1)

Giovane
Giovane

Reputation: 1451

Well, as you are working with in DOM template you should take a look at the DOM Template Parsing Caveats

In order to your example to work you should use the attribute is in a <tr>:

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

And add the row prop in the row-c:

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

Upvotes: 2

Related Questions