Subscribe on changes!

Wrong detecting missing v-if in named slot template

avatar
Jan 5th 2022

Version

3.2.26

Reproduction link

sfc.vuejs.org/

Steps to reproduce

In the reproduction link there is this code:

    <h1 v-if="false">H1</h1>
    <template #my-slot>
      This should render
    </template>

which is working, but if you add a v-else to the template tag it breaks

What is expected?

<template> should accept both slot name and v-else

What is actually happening?

It wrongly detects that there is no corresponding v-if for the v-else:

SyntaxError: v-else/v-else-if has no adjacent v-if or v-else-if.
avatar
Jan 5th 2022

I think in a way, it's correct. what you wrote is a shorter variant of:

<Comp>
  <template #default>
    <h1 v-if="true">H1</h1>
  </template>
  <template v-else #my-slot>
    This should render
  </template>
  </Comp>

As you can see, the v-if and v-else are not actually on the same level.

In your code, you use the - common-sense - shorthand for the default slot: don't use a <template #default>, just pass the slot content as direct children to the component. But semantically, it's the same as my example above.

avatar
Jan 5th 2022

oh I see, you're right! Thank you