vuejs/core

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

Bl00D4NGEL opened this issue · 1 comments

Vue version

3.4.23 (or earlier) - 3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNq1VEFP8zAM/Ssmh28fEu0Eg8tUJgEaAg6AAIlLJFRadxTSJErSMmnaf8fJGB0TQ4OJU12/F+c9W/GEHWkdNzWyPktsZkrtwKKr9YDLstLKOJiAwQKmUBhVQYeoHS65zJS0Dio7gkOP/++coRAK7pUR+VZnm8ukOytHhejHYaVF6pD+AJK8bEIA0ERlcchZkQqLnEGXEkgh/JsjztSLQH92LNmKIhiOtcPMYd6HO2JBFL0X9fWXKg9O/Tfptje/k8Jtn+4a+GIrmAGDvRZto58aW0a+c7a3ubdP3EUH6/n73diWPP39sFbIXRLwKFL50ipYd1RzNxtOYC3FKzT9dXM3fgdJd+Glsx3mLC2KohzFz1ZJ2jGT8FRYpipdCjRX2pW0SMgMBMRjKe2R14uQ80J25vnsCbOXL/LPduxznF0btGgakv6BudSM0M3g4e0ljin+ACuV18I3cjV4g1aJ2muc0Y5rmZPsBV5Qex42ZSlHd3Y4dijt3FToJDGngc8Zbc+Tb6y3cnvxfjjH5ZS6+NCg8TWpgb34IN7tsekb/GzLOg==

Steps to reproduce

Reproduction link already shows the issue at hand.

Using v-else and v-if on the same component does not result in what I would consider expected behaviour.

What is expected?

In a case of a v-else and v-if on the same component I would expect either:

  • An (compiler?) error when rendering the component
  • If the condition in the v-if is true / truthy it should not "fall-through" to the else block

What is actually happening?

In case of v-else and v-if being on the same component it will ignore the condition in v-if if there is a component after it that has a v-else block.

System Info

System:
    OS: Linux 6.8 Ubuntu 22.04.5 LTS 22.04.5 LTS (Jammy Jellyfish)
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12500H
    Memory: 14.36 GB / 31.02 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    Yarn: 1.22.22 - ~/.yarn/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.15.0/bin/npm
    pnpm: 9.7.1 - ~/.local/share/pnpm/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 133.0.6943.53

Any additional comments?

No response

Don't use v-else and v-if on the same element. This is incorrect usage. Please refer to the documentation for the correct use of v-if/v-else.