My Alpinejs component code is in an EventListener and I wish to use the magic $dispatch to pass a title string from outside the component. I can only achieve this using an onclick event but really need to do this on page load.
This is the code outside of the component used to pass in the title using @click. This works but it needs to be set when the page is loaded (in Alpinejs I believe this is x-init)
<div x-data>
<button
@click="$dispatch('myparams', { title: 'The title' })"
type="button"
>
More info
</button>
</div>
Using x-init does not work with the below
<div
x-data
x-init="() => $dispatch('myparams', {'title': 'Initialised'})"
// x-init="$dispatch('myparams', {'title': 'Initialised'})"
>
</div>
Here is my component with what I've tried to receive data from outside
<section
x-data="mypage"
@myparams.window="title = $event.detail.title"
>
<h2 x-text="title"></h2>
</section>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('mypage', () => ({
title: '',
init() {
@myparams.window="title = $event.detail.title"
console.log('I will get evaluated when initializing this component.')
},
}))
})
</script>
The reason of this behavior is that you dispatch the myparams event before the initialization of listener for myparams event. So the first time no one is listening.
The future-proof solution is to use $nextTick so the dispatch fires after DOM updates.
<div x-data="initMyparams"></div>
<section x-data="mypage" @myparams.window="title = $event.detail.title">
<h2 x-text="title"></h2>
</section>
Where we have a new initMyparams component using $nextTick:
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('mypage', () => ({
title: '',
init() {
console.log('I will get evaluated when initializing this component.')
},
})),
Alpine.data('initMyparams', () => ({
init() {
this.$nextTick(() => this.$dispatch('myparams', { title: 'Initialised' }))
},
}))
})
</script>
Managed to figure it out. Basically All I needed to do was include the component on the page BEFORE the onload (x-init) event.