how to hide flash msg after some time..Using Alpine.js

my code

 <footer  x-data="{show: false}" class="flex justify-end" id="flashmsg">
            @if (session()->has('success'))
                <div x-show="show" class="fixed text-white bg-blue-500 rounded-lg shadow bottom-3 text-xl p-4 mr-5 " id="successMessage">
                    <p>{{ session()->get('success') }}</p>
                </div>
            @endif
        </footer>

tykus

3 years ago

Best Answer

Level 104

Make the Alpine Component from the element that conditionally renders - i.e. move the x-data down a level:

<footer  class="flex justify-end" id="flashmsg">
    @if (session()->has('success'))
        <div x-data="{show: true}"  
            x-show="show"
            x-init="setTimeout(() => show = false, 5000)
           class="fixed text-white bg-blue-500 rounded-lg shadow bottom-3 text-xl p-4 mr-5 " 
           id="successMessage"
        >
            <p>{{ session()->get('success') }}</p>
        </div>
    @endif
</footer>

1 like

Please or to participate in this conversation.