Skip to content

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

Closed
@Bl00D4NGEL

Description

@Bl00D4NGEL

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions