El código de mi componente Alpinejs está en un EventListener y deseo usar el envío mágico de $ para pasar una cadena de título desde fuera del componente. Solo puedo lograr esto usando un evento onclick pero realmente necesito hacer esto en la carga de la página.
Este es el código fuera del componente usado para pasar el título usando @click. Esto funciona, pero debe configurarse cuando se carga la página (en Alpinejs, creo que esto es x-init)
<div x-data> <button @click="$dispatch('myparams', { title: 'The title' })" type="button" > More info </button> </div>Usar x-init no funciona con lo siguiente
<div x-data x-init="() => $dispatch('myparams', {'title': 'Initialised'})" // x-init="$dispatch('myparams', {'title': 'Initialised'})" > </div>Aquí está mi componente con lo que he intentado recibir datos desde el exterior.
<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>El motivo de este comportamiento es que envía el evento myparams antes de la inicialización del detector para el evento myparams . Así que la primera vez nadie está escuchando.
La solución preparada para el futuro es usar $nextTick para que el envío se active después de las actualizaciones de DOM.
<div x-data="initMyparams"></div> <section x-data="mypage" @myparams.window="title = $event.detail.title"> <h2 x-text="title"></h2> </section> Donde tenemos un nuevo componente initMyparams usando $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>Se las arregló para averiguarlo. Básicamente, todo lo que tenía que hacer era incluir el componente en la página ANTES del evento onload (x-init).