CODEWITHSUNDEEP
vuejs2
Mitchel Jager
Mitchel Jager

Reputation: 445

Vue child component not rendering

I have 2 components:

Vue.component('page', {
  props: ['pages'],
  template: '<li>{{ pages.title }}</li>'
})

Vue.component('block', {
  props: ['blocks'],
  template: '<div>{{ blocks.id }}</div>'
})

"Page" is the Parent component, and "Block" the child component.

Both of the components contain a loop through an array:

<page v-for="page in pages" v-bind:pages="page">
    <block v-for="block in blocks" v-bind:blocks="block"></block>
</page>

The "Block" component is not being rendered at all, while it is when placed outside of the parent "Page" component. I feel like I am missing something obvious, but what is it?

Upvotes: 1

Views: 4815

Answers (1)

Nora
Nora

Reputation: 3261

You should include the block component in the list of components for the page component.

var block = {
   props: ['blocks'],
   template: '<div>{{ blocks.id }}</div>'
});

Vue.component('page', {
   data: function () {
     return {
       pages: [{title: 'Some title', blocks: [{id: 1, {id: 2}, {id: 3]}]
     }
   },
   components: {
     block: block,
   },
   props: ['pages'],
   template: `<li>{{ pages.title }}<block v-for="block in page.blocks" v-bind:blocks="block"></block></li>`
});

Then use the page component like:

<page v-for="page in pages" v-bind:pages="page"></page>

You can check out the documentation

Upvotes: 1

Related Questions