Why is my Event Listener not Firing After the Second Event?

Question

I'm building a photo upload form with Livewire, Alpine, and FilePond. After the photos have finished processing I want to show a "Save" button to persist the files.

I'm using Alpine to handle the show/hide. Both event listeners are working correctly when separated, but I just can't seem to get them to work together. The below code is not throwing errors, but it's also not showing the buttons inside the showSaveButtons div.

What am I doing wrong?

<div x-data="showSaveButtons">
    <div x-show="open">
        Buttons Go Here
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('showSaveButtons', () => ({
            open: false,
        }));
        document.addEventListener("FilePond:processfiles", () => {
            Alpine.data('showSaveButtons', () => ({
                open: true,
            }));
        });
    })
</script>

Answer 1

This is because you're creating a second Alpine.data object, instead of editing the existing one.

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('showSaveButtons', () => ({
            open: false,

            init() {
                // So we can access "this" inside the listener
                let context = this;

                document.addEventListener("FilePond:processfiles", () => {
                    context.open = true;
                }); 
            }
        });
    });
</script>

If you're curious about the init function, check the docs