Estoy construyendo un sitio con Laravel, tailwind css y alpinejs. Tengo una navegación móvil que es una barra lateral fuera del lienzo y un carrito de compras modal. El menú móvil receptivo funciona bien, pero no puedo entender por qué no se muestra el modal:
Layout.blade.php en el que se colocan los componentes de la hoja:
<body class="bg-[#F8F3F0]" > <div x-data="{ open: false, opencart: false }" @keydown.window.escape="open = false"> <x-home.cart /> <x-home.mobilenav /> <div class="w-full hexnoisegrad h-[700px]"> ... <x-home.nav /> ...En el componente home.nav tenemos botones que activan el menú y el modal:
... <button type="button" class=" ..." @click="open = true"> <span class="sr-only">Open sidebar</span> <x-icon.menu /> </button> <button type="button" class=" ..." @click="opencart = true"> <span class="sr-only">Open Cart</span> <x-icon.bag/> </button>En el componente home.mobilenav tenemos:
<div dir="rtl" x-show="open" class="fixed inset-0 flex z-40 lg:hidden" x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state." x-ref="dialog" aria-modal="true"> ...Y finalmente en el componente home.cart (modal) tenemos:
<div x-data="{ opencart: false }" @keydown.window.escape="opencart = false" x-show="opencart" class="fixed z-10 inset-0 overflow-y-auto" x-ref="dialog" aria-modal="true"> ...¡No sé por qué, pero Menú funciona bien y Modal (Carrito de compras) no! Creo que de alguna manera no puede acceder a "opencart" para verificar el x-show. Si cambio los datos x del componente del carrito a:
x-data="{ opencart: true}"Modal se abrirá correctamente por primera vez, pero después de cerrar el botón no volverá a aparecer. También tengo menús desplegables que funcionan bien con alpine.
Lo siento mucho por la publicación larga y tomar su tiempo. Gracias por adelantado.
La documentación de Alpinejs indica
Las propiedades definidas en una directiva de datos x están disponibles para todos los elementos secundarios. árbitro
Eso implica una relación padre/hijo entre los elementos que contienen x-data y x-show .
Así que intente agregar un contenedor div para contener solo x-data .
<div x-data="{ opencart: false }"> <div @keydown.window.escape="opencart = false" x-show="opencart" class="fixed z-10 inset-0 overflow-y-auto" x-ref="dialog" aria-modal="true"> ... </div>