I am conditionally rendering a child component using render function. Here is an example of the parent component with the child component:
<Parent :index="1">
<Child> ... </Child>
<Child> ... </Child>
<Child> ... </Child>
</Parent>
in the render function of Parent
component, I have the following code to conditionally render the child component like this:
return () => {
const content = slots.default?.();
const children = content?.filter(child => child.type === Child);
const childToRender = children?.[props.index] ?? h('div')
return h('div', {}, () => [childToRender]);
}
the code is working as expected.
However, I would like to wrap one of the child component with another component. For example like this:
<Parent :index="1">
<Child> ... </Child>
<ChildWrapper> ... </ChildWrapper>
<Child > ... </Child>
</Parent>
where ChildWrapper.vue
looks like this:
<template>
<Child> <slot/> </Child>
</template>
which evidently the filter function (content?.filter(child => child.type === Child)
) will not pick up the Child
component in the ChildWrapper
component.
If I inspect the ChildWrapper VNode’s children property, it shows an object (with the default slot function) instead of an array with Child
component which I expected. So my question is how do I get hold of the nested Child
component?