Slot wrapped in `v-if` disappears after re-render

[atomanyih]

Version

2.6.11

Reproduction link

https://jsfiddle.net/y9kmcbg6/

Steps to reproduce

1. JSFiddle will render both elements.
2. After 3s, it will toggle off
3. After 3s, it will toggle on
4. To see it happen again, rerun the jsfiddle

What is expected?

At step 3, the bottom slot content should re-appear when ToggleComponent toggles back

What is actually happening?

The bottom slot never re-appears

---

Seems to be related to the v-if on line 21. I'm doing this b/c it's useful to have an optional slot, but I don't want an extra div to appear when the slot isn't used (for layout reasons). I'm fairly new to vue, so I don't know if there's a different recommended way to do this.

Not documented in the example, but if ParentComponent updates, the slot content will re-appear

example code included here for perusal:

const ToggleComponent = {
  data() {
    return {
      toggleEl: true,
    };
  },

  created() {
    setTimeout(() => this.toggleEl = false, 3000);
    setTimeout(() => this.toggleEl = true, 6000);
  },
  render(h) {
    return this.toggleEl ? h('div', this.$slots.default) : null
  }
};

const SlotComponent = {
  template: `
    <div>
      <slot></slot>
      <div v-if="$slots.other">
        <slot name="other"></slot>
      </div>
    </div>
  `
}

const ParentComponent = {
  template: `
    <ToggleComponent>
      <SlotComponent>
        <template v-slot:default>
          I should have an element below me
        </template>
        <template v-slot:other>
          I am the element below you
        </template>
      </SlotComponent>
    </ToggleComponent>
  `,

  components: {
    ToggleComponent,
    SlotComponent
  },
}

var demo = new Vue({
  el: '#demo',
  template: `
    <ParentComponent/>
  `,

  components: {
    ParentComponent
  },
});

[posva]

This is because v-slot is like the old slot-scope. It seems that in this case $slots is not in sync with $scopedSlots but you can use $scopedSlots instead of $slots in the v-if you mentioned to workaround the issue

[atomanyih]

@posva Thanks, that worked!
Questions:

• Are there any other implications of using $scopedSlots vs $slots?
• What do you mean by "v-slot is like the old slot-scope"?

[john-raymon]

I just had the same issue, where checking $slots.default to conditionally render between slot or <form> element will work fine, something like

    // component <foo-bar>
    <template v-if="$slots.default">
      <slot v-bind:food="'chicken'"/>
    </template>
    <form v-else>
    </form>

up until when consuming AND trying to utilize scoped slot props. (adding v-slot:default="slotProps)

      <foo-bar>
        <template v-slot:default="slotProps">
          <p>slot stuff</p>
        </template>
      </foo-bar>

// even tried with foo-bar having v-if="$slots.default' internally too
    <foo-bar v-slot="slotProps">
      <p>slot stuff</p>
    </foo-bar>

TLDR; Adding scoped slots to foo-bar (<foo-bar v-slot="slotProps">) breaks inner v-if condition based on $slots.default unless when applying @posva's suggestion, see below

    // component <foo-bar>
-    <template v-if="$slots.default">
+    <template v-if="$scopedSlots.default">
      <slot v-bind:food="'chicken'"/>
    </template>
    <form v-else>
    </form>

I'm using the latest stable version, 2.6.11.