Tengo una pregunta simple, pero me está volviendo loco para hacer ejercicio. Estoy usando AlpineJS para mostrar y ocultar contenido. Normalmente con alpine, el botón y el contenido estarán en el mismo elemento, pero aquí lo tengo fuera. Esto funciona. Pero no puedo agregar clases tanto al botón como al div de contenido cuando el contenido está abierto o cerrado.
Alguien me puede orientar por favor.
<!-- button --> <div class="mt-4" x-data="{id: 1}"> <button @click="$dispatch('open-dropdown',{id})" type="button" class="bg-white hover:bg-gray-50" :class="{ 'bg-green-400': open, 'bg-gray-200': !(open) }"> I'm the button </button> </div> <!-- popup 1 --> <div x-data="{ open: false }" x-show="open" @open-dropdown.window="if ($event.detail.id == 1) open = true" @click.away="open = false"> <div class="bg-white hover:bg-gray-50" :class="{ 'bg-green-400': open, 'bg-gray-200': !(open) }"> I'm the content </div> </div>Para esto, puede mover el estado open dentro del objeto $store global de Alpine.js al que se puede acceder para todos los componentes de la página.
<!-- button --> <div class="mt-4" x-data="{id: 1}"> <button @click="$dispatch('open-dropdown',{id})" type="button" class="bg-white hover:bg-gray-50" :class="{ 'bg-green-400': $store.open, 'bg-gray-200': !($store.open) }"> I'm the button </button> </div> <!-- popup 1 --> <div x-data x-show="$store.open" @open-dropdown.window="if ($event.detail.id == 1) $store.open = true" @click.away="$store.open = false"> <div class="bg-white hover:bg-gray-50" :class="{ 'bg-green-400': $store.open, 'bg-gray-200': !($store.open) }"> I'm the content </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('open', false) }) </script> Dado que nuestro estado open en la tienda es un valor simple, podemos reemplazar cada open con $store.open . Tenga en cuenta que el componente popup 1 aún requiere un atributo x-data vacío.