slot render error with a v-if/v-else
Version
3.2.0-beta.3
Reproduction link
Steps to reproduce
- in App.vue, slot content span's condition is falsy, but template's condition is truthy
- span use the default slot, template use the a slot
- 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
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
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>
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.