Quiero ocultar un elemento con Alpine después de X segundos. Así que necesito ejecutar un setTimeout() que cambia una variable de datos x a la que está vinculado el espectáculo x del elemento.
Actualmente estoy usando la etiqueta de secuencia de comandos con JS normal, pero parece que no puedo acceder a las variables de datos x desde ella.
Como ejemplo:
<div x-data="showSomething = true"> <script> setTimeout(() => { this.showSomething = false; }, 1500); </script> </div>Recibo este error si uso "esto". O no:
Error de referencia no capturado: showAlgo no está definido
¿Cómo puedo acceder a las variables de datos x desde JS normal, o hay alguna forma de hacerlo en Alpine?
Editar: resolví esto usando x-on para escuchar el evento (y refiriéndose a las variables sin .this dentro de esa función)
Utilice x-init .
<div x-data="{ showSomething: true }" x-init="setTimeout(() => { this.showSomething = false; }, 1500)" > </div>