How does one render vnodes from a parent component of its child components. I have a render function that is looping through an array of children found in this.$slots.default. The aim is to wrap the children in li tags.
The problem is that the children components don't render and I get empty li tags. What am I missing here and where can the solution be found in the documentation. The Fiddle Can be found here And the embedded code is below.
// Parent component
const MyParent = Vue.component('my-parent', {
render: function(createElement) {
var parentContent = createElement('h2', "These are Parent's Children:")
var myChildren = this.$slots.default.map(function(child) {
//console.log("Child: ", child)
return createElement(
'li',
child
)
})
var content = [].concat(parentContent, myChildren)
return createElement(
'div', {},
content
)
}
});
// Child Component
const MyChild = Vue.component('my-child', {
template: '<h3>I am a child</h3>'
});
// Application Instance
new Vue({
el: '#app',
components: {
MyParent,
MyChild
}
})<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<my-parent>
<my-child></my-child>
<my-child></my-child>
</my-parent>
</div>