conditional root template in .vue file

[derMart]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/sad-benz-d69xb

Steps to reproduce

Not sure if this applies to vue or vue-loader. It seems v-if statements are not processed correctly when inside a root template tag.
Suppose you have the following .vue file:

<template v-if="true">
  <p>test</p>
</template>
<template v-else>
  <p>test2</p>
</template>

What is expected?

The test paragraph should be rendered as v-if is true (also tested with other more complicated truthy conditions)

What is actually happening?

The test2 paragraph is rendered.
It seems always the last template tag, having either v-else or any v-else-if statement is rendered, even if that v-else-if condition is false.

[posva]

This is not supported. You need to put the v-if on the p element and have one root template
Also note that template as the root:

<template>
  <template v-if="condition">
  ...
  </template>
</template>

Is not supported either (you get a warning about it)

This shouldn’t be a problem with vue 3 as the one single element as the root rule is not longer there

[derMart]

Ok, thank you.
Could you please update the documentation of vue 2.x to include this limitation, that conditions are not supported on the root template tag? I have not seen it anywhere documented.

[sirlancelot]

Documentation is here: https://vuejs.org/v2/guide/components.html#A-Single-Root-Element

Note that conditionals on the root are supported, the only caveat is that every branch of the conditional must resolve to a single element. An empty <div v-else /> should do the trick if you don't want to render anything.

[derMart]

Thank you very much. I know of the single root requirement, but the problem above is exactly of the nature you describe and as such does not violate that requirement. Every branch resolves to a single component, even to the same element (p tag), but still the conditions are not resolved correctly.
Here is finally the example on codesandbox: https://codesandbox.io/s/sad-benz-d69xb
There, as stated above test2 is rendered instead of test
So if this should be supported, I guess it is a bug you might consider to reopen. If not, please update the documentation and please generate a warning while compiling / rendering the component.

[sirlancelot]

<template v-if="true">
  <p>test</p>
</template>
<template v-else>
  <p>test2</p>
</template>

Should be:

<template>
  <p v-if="true">test</p>
  <p v-else>test2</p>
</template>

Vue single file components should always have no more than one root <template> tag.