vuejs/vue

v-if and v-else on same element has inconsistent (or undocumented) behaviour

Bl00D4NGEL opened this issue · 1 comments

Problem

When using v-if and v-else on the same element it has weird behaviour.

I am currently running Vue version 3.5.13

Example Code

Example:

<div v-if="false">False</div>
<div v-else v-if="true">True</div>
<div v-else>True 2</div>

will show True 2 instead of True. However

<div v-if="false">False</div>
<div v-else v-if="true">True</div>

will show True.

Using a v-else-if like this:

<div v-if="false">False</div>
<div v-else-if="true">True</div>
<div v-else>True 2</div>

will show True as expected.

Expected

I would either expect there to be an error of "incorrect use" of v-if and v-else on the same element or similar behaviour to a v-else-if instead of.. what's currently happening. I might have missed this in the documentation but I could not find any mention of this behaviour anywhere.

Just noticed this is the repo for Vue 2. However my issue happens in Vue 3 (it might happen in Vue 2 but I don't think it'd matter).

See: vuejs/core#12997