Вью ребенок компонент не оказывающего

Question

У меня есть 2 компонента:

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

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

«Страница» является компонентом Родитель, и «Блок» ребенок компонент.

Оба компонента содержит цикл через массив:

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

Компонент «Блок» не визуализируемый на всех, в то время, когда он помещен вне «страницы» компонента родительской. Я чувствую, что мне не хватает чего-то очевидного, но что это?

Answer 1

Вы должны включить компонент блока в список компонентов компонента страницы.

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>` 
}); 

Затем используйте компонент страницы, как:

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

Вы можете проверить documentation