Amresh Venugopal Amresh Venugopal -4 years ago 101
Javascript Question

Conditional rendering if slots are not passed from the parent

Take the code below as an example:

<header>
<slot name='header'></slot>
<template v-if='?'>
<h1>{{ someInput }}</h1>
</template>
</header>


I want to show the
<h1>{{ some input }}</h1>
if nothing gets passed through the slots. What could I use as the condition in
v-if
?

Answer Source

This is enough:

<header>
  <slot name='header'>
    <h1>{{ someInput }}</h1>
  </slot>
</header>

Anything originally inside the tags is considered fallback content. Fallback content is compiled in the child scope and will only be displayed if the hosting element is empty and has no content to be inserted.

From docs.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download