CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Amresh Venugopal
Amresh Venugopal

Reputation: 9549

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 ?

Upvotes: 2

Views: 1910

Answers (1)

Jonatas Walker
Jonatas Walker

Reputation: 14168

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.

Upvotes: 2

Related Questions