conditional root template in .vue file

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.

[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.

[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.