v-for iterating over v-else

Version

2.5.17

Reproduction link

https://jsfiddle.net/hirokiosame/7mfcktv4/

Steps to reproduce

Add a v-for and v-if to an element with a v-else sibling. If the v-if condition evaluates to be falsy, the iteration happens over the v-else element.

What is expected?

For the v-for to not iterate over the v-else

What is actually happening?

The v-for is iterating over the v-else

[privatenumber]

To be clear, the bug I’m reporting isn’t that v-for is happening before v-if. It’s that the v-for is being applied to code outside of the iteration.

What’s happening:

<template v-for="i in 10">
	<div v-if="useDiv">
		Div: {{ i }}
	</div>
	<span v-else>
		Span
	</span>
</template>

Expected behavior:

<template v-for="i in 10">
	<div v-if="useDiv">
		Div: {{ i }}
	</div>
</template>
<span v-else>
	Span
</span>

[KaelWD]

https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential

https://jsfiddle.net/rhxpnbty/