Child component <slot v-if="false"> will still evaluate parent slot code

Version

2.5.16

Reproduction link

https://github.com/bbugh/v-if-slot-issue/commit/ffd6d476bf378936566b4916c1342af4310ef412

Steps to reproduce

1. Create a child component with a conditional slot:

   <template>
     <div>
       <slot v-if="showSlot" />
     </div>
   </template>
   

2. Use the slot in a parent component, using code that should not be called when v-if resolves as false:

   <conditional-slot :showSlot="false">
     {{ example.should.not.be.called }}
   </conditional-slot>
   
   data: () => ({
     example: {}
   })
   

Observe that slot code is called, and fails because “example” is an empty object.

A runnable demo of this is in the linked repository.

What is expected?

The behavior is expected to match v-if’s behavior in other circumstances, which is that the code in the if block is not evaluated when the conditional check resolves as false.

What is actually happening?

The parent slot code is always evaluated, regardless of the value of v-if in the child component.

[sirlancelot]

You can use the new v-slot syntax (<template #default></template>) to prevent the slot content from rendering until its needed.

v-slot documentation

[eZanmoto]

I’d just like to elaborate on @yyx990803 and @sirlancelot’s answers with a bit more detail for people landing on this page looking for quick answers. Take the following code as an example (preview at https://jsfiddle.net/yd2Lpcf1/4/):

<div id="app">
  <div>
    <div v-if="!person">Loading</div>
    <div v-else>Hi {{person.name}}</div>
    
    <layout :loading="!person">
      Hi {{person.name}}
    </layout>
  </div>
</div>

<template id="layout">
  <div>
    <div v-if="loading">Loading</div>
    <slot v-else></slot>
  </div>
</template>

Vue.component('layout', {
  template: '#layout',
  props: ['loading']
});

new Vue({
	el: '#app',
  data() {
    return { person: null }
  },
  mounted: function () {
    setInterval(() => {
	    this.person = this.person ? null : {name: 'John'}
    }, 1000)
  }
});

When this is run in the fiddle linked above then the preview will be blank for a second, then “Hello John” will be shown twice. If run in its own page, then the error console will show the error Cannot read property 'name' of null, referring to the fact that person.name defined in the <layout> section was eagerly evaluated and raised an error. This error is thrown every second. This demonstrates that slots are evaluated eagerly and that the error halts the rendering of the child component and the parent component - “Loading” isn’t printed in the first v-if, nor in the one in the child component. It also demonstrates that, even though the slot was eagerly evaluated originally, it is still re-rendered when the value of person changes.

Following @sirlancelot’s recommendation, the only thing that needs to change is to nest an extra <template> layer inside the <layout>:

    <layout :loading="!person">
      <template #default>
        Hi {{person.name}}
      </template>
    </layout>

When the page is re-run then the preview will show “Loading” twice, for a second, and then “Hello John” will be shown twice, and these values will change every second. The error console will be blank. This demonstrates that the slot is lazily evaluated following the expected v-if logic, as expected, and the whole component is properly re-evaluated reactively, instead of just being re-rendered.

In short, when you’re using a component with a conditional slot like <MyBaseComponent>...</MyBaseComponent>, simply wrap the content as @sirlancelot described (<MyBaseComponent><template #default>...</template></MyBaseComponent>), and the default slot will evaluate in the way you’d expect.

As an aside, if support for Vue 2.0 is expected to continue for much longer, I would recommend updating the documentation for slots with a section on the “Eager Evaluation” caveat and how it can be solved using the v-slot workaround.