setTimeout with x-show bug #4216

Nothing-Works · 2024-05-15T15:54:57Z

Nothing-Works
May 15, 2024

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div x-data="game()"
     class="px-10 flex items-center justify-center min-h-screen">
    <div class="flex-1 grid grid-cols-4 gap-10">
        <button
            :style="'background: ' + (card.flipped ? card.color : '#999')"
            class="h-32 w-full"
            x-show="!card.cleared"
            @click="flipCard(card)"
        >
        </button>
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('game', () => ({
            card: {color: 'green', flipped: false, cleared: false},
            flipCard(card) {
                card.flipped = !card.flipped;
                setTimeout(() => {
                    this.card.cleared = true
                }, 500)
                setTimeout(() => {
                    this.card.flipped = false
                }, 1000);
            }
        }))
    });
</script>
</body>
</html>

I think this is a bug, If you run this the card will re-appear, but I am expecting it to be gone.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

setTimeout with x-show bug #4216

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

setTimeout with x-show bug #4216

Uh oh!

Nothing-Works May 15, 2024

Replies: 0 comments

Nothing-Works
May 15, 2024