Provide an x-else for conditional rendering

[kevinXmichael]

The thing is, if-else has a different meaning than two ifs.
Also, an if-else will only evaluate once, two ifs two times.

Using an if-else for a conditional rendering can be handy though, React / Vue / Svelte etc. all have it because it is like a syntactic sugar.

When extending the conditional rendering with such an else statement, it should be considered to also provide an else-if.

<template x-if="conditionA">
    <div>...</div>
</template>

<template x-else-if="conditionB">
    <div>...</div>
</template>

<template x-else>
    <div>Show default</div>
</template>

[almahdi404]

We definitely need this feature!
I am stuck in my project.

[Chandler-Zhu]

Yes we need this, I thought I could work around this but to no avail. I was trying to use ternary operator in a x-bind:style and it just won't work

[jimmywarting]

reminds me about sveltejs promise template syntax...

{#await promise}
    <span>Loading... please wait</span>
{:then user}
    <h1>Hello {user.name} 👋</h1>
{:catch error}
    <span>Something went wrong: {error.message} 🤕</span>
{:finally}
    <p>done loading</p>
{/await}

should have something like that also

[Velkamhell97]

any update ?

[thelegend09]

That'd be really nice to have

[ramibch]

I would love to have this feature or a new directive (x-match):

    <template x-match="option">
      <div x-case="A">Option A is active</div>
      <div x-case="B">Option B is active</div>
    </template>

So I dont have to write this ugly code:

    <template x-if="dark_theme">
      <link href="{{ dark_pygments_css }}" rel="stylesheet" />
    </template>

    <template x-if="!dark_theme">
      <link href="{{ light_pygments_css }}" rel="stylesheet" />
    </template>

[ekwoka]

There was one PR that was opened, and I remember making some adjustments to it to try to get the if-else-if-else chain to work properly. Not sure what happened to it.

Doubling or tripling up the x-if isn't that much of an issue...