slot render error with a v-if/v-else

[gdh51]

Version

3.2.0-beta.3

Reproduction link

SFC PLAYGROUND

Steps to reproduce

1. in App.vue, slot content span's condition is falsy, but template's condition is truthy
2. span use the default slot, template use the a slot
3. in Comp.vue, provide both default slot and a slot with fallback value

What is expected?

111 is rendered without warning

What is actually happening?

text 'slot a' is rendered with a error

(4:18) v-else/v-else-if has no adjacent v-if.

---

It can run in runtime compile, but it seems that can't run in the playground

ps: if we delete v-else it can run correctly

[posva]

Not sure if it makes sense to pass component slots that are supposed to render at different places and use a v-if/v-else which expects them to be together.

As a workaround, you can use a v-if instead of the v-else

[lidlanca]

The following seem like a sensible use case

<template>
 <comp>
  <span v-if="condition">{{value}}</span>
  <template #error v-else>
   missing value
  </template>
  this will show in default slot regardless of condition
 </comp>
</template>

which works using explicit default named template:

  <comp>
    
    <template #default v-if=condition >
  	<span>the value {{value}}</span>
    </template>
    
    <template #error v-else>
    	missing value
    </template>
    
    this only shows when condition is false. ( no explicit default  template )
  </comp>

[yyx990803]

This is wrong usage. You can't mix default slot and named slot container in the same v-if/v-else branch... this should throw a compiler error.

Use explicit <template #default v-if="..."> as shown by @lidlanca's 2nd snippet.

[yyx990803]

There already is a compiler error for this.