toggling named template slots with v-if/v-else is not reliable

[JamesBoon]

Version

3.1.1

Reproduction link

https://jsfiddle.net/4do76tf9/

Steps to reproduce

Just click "+1" in the jsfiddle demo.

What is expected?

Always the same letter should be shown.

What is actually happening?

The v-if content still shows up, even if the v-else should be used.

---

Noted in v3.0.11, confirmed in v3.1.1.

There is a workaround: just do not use v-if/v-else for named slots content. But it should at least throw a warning and/or be stated in the docs.

<!-- fails -->
<TestSlot>
  <template v-if="a" #content></template>
  <template v-else #content></template>
</TestSlot>

<!-- ok -->
<TestSlot>
  <template #content>
    <template v-if="a"></template>
    <template v-else></template>
  </template>
</TestSlot>

Update: As @ShGKme pointed out in the comments, this works as expected in Vue 2. Here is a quick demo of the Vue 2 behavior: https://jsfiddle.net/s7cpe1jk/

[posva]

I would say the workaround is the preferred way to write it so you pass one single slot.

[JamesBoon]

I would say the workaround is the preferred way to write it so you pass one single slot.

This is absolutely ok, but the other way works somehow - and leads to this strange error shown in the jsfiddle. Thus if there would be some kind of warning like "don't use v-if/v-else together with named slots" either in the console or the docs, it would already help a lot.

[ShGKme]

In addition this works in Vue 2 and isn't mentioned in the Migration Guide.

[JamesBoon]

@posva I've searched the tests a bit and found those for Vue 2: 'should work with v-if/v-else' and Vue 3: 'named slot with v-if + v-else-if + v-else'.
The fact that there are tests to cover the use of v-if/v-else together with named slots leaves the impression that the reported behavior is indeed a bug and not a missing feature.