x-if seems buggy / sticky? [DISREGARD: Double post, cant find way to delete] #2541

tbjolset · 2021-12-28T14:29:18Z

tbjolset
Dec 28, 2021

Try the example below: Initially, user is null, and the x-if leaves it alone. Tap log in, x-if now shows the logged in user. Then tap logout, user is now null again. The x-if correctly doesnt try to show the user any more, but still tries to evaluat user.name for some reason, causing console errors etc. In practise, this makes it hard/impossible for me to do component based design.

<html lang="en">
<head>
  <script src="//unpkg.com/alpinejs" defer></script>
</head>

<body x-data="{ user: null }">
  <template
    x-if="user !== null"
  >
    <div>
      <div x-text="'user: ' + user.name"></div>
      <button @click="user = null">Log out</button>
    </div>
  </template>
  <template x-if="!user">
    <button @click="user = { name: 'lebowski' }">Log in</button>
  </template>

</body>

</html>

(sorry if this somehow got double posted, i tried to submit first but couldnt find my original question when searching)

SimoTod · 2021-12-28T15:20:42Z

SimoTod
Dec 28, 2021
Collaborator

This project uses discussions (in case you were trying to find the first question in the issue tab).

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

x-if seems buggy / sticky? [DISREGARD: Double post, cant find way to delete] #2541

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

x-if seems buggy / sticky? [DISREGARD: Double post, cant find way to delete] #2541

Uh oh!

tbjolset Dec 28, 2021

Replies: 1 comment

Uh oh!

SimoTod Dec 28, 2021 Collaborator

tbjolset
Dec 28, 2021

SimoTod
Dec 28, 2021
Collaborator