Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

187
Vistas
How to access Alpine variables from normal JS?

I want to hide an element with Alpine after X number of seconds. So I need to run a setTimeout() that changes an x-data variable that the element's x-show is bound to.

I'm currently using the script tag with normal JS in, but I can't seem to access the x-data variables from it.

As an example:

<div x-data="showSomething = true">
    <script>
        setTimeout(() => {
            this.showSomething = false;
        }, 1500);
    </script>
</div>

I get this error whether I use "this." or not:

Uncaught ReferenceError: showSomething is not defined

How can I access the x-data variables from normal JS, or is there a way to go about this in Alpine?

Edit: I solved this by using x-on to listen for the event (and referring to the variables without .this within that function)

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Use x-init.

<div
    x-data="{ showSomething: true }"
    x-init="setTimeout(() => { this.showSomething = false; }, 1500)"
>
</div>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda