Subscribe on changes!

Problem with abnormal behavior when using conditional rendering of nested slots

avatar
Jul 12th 2023

$slot.header returns a function. That function, when called, will render the slot content. if there's no slot content, it will return undefined

v-if="$slot.header()"

Be aware that:

  1. This can have a certain runtime cost as the slot function is essentially a render function creating the vdom for the slot content, which can be relatively expensive if the slot contant is really large.
  2. Slots sometimes can be "empty" at first glance from but technically still contain an empty Fragment vnode, so checking for undefined wil not necessarily alway be successul:
<your-component>
{{ isCondiotion ? 'yes' : undefined }} //this will lead to a Fragment.
</you-component>

If you need further help, please use Discussions or Discord to ask the community for help.