• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

253
Vistas
¿Por qué Alpine.js no funciona con todos los eventos de sus ejemplos?

Estoy probando Alpine.js, pero algunos de los ejemplos no me funcionan. Por ejemplo

 <button x-on:click="alert('Hello World!')">Say Hi</button>

Esto no alerta nada.

 <button x-on:click="console.log('test')">Log</button>

Y esto no registra nada en la consola. Sin embargo, otras cosas funcionan:

 <div x-data="{ count: 0 }"> <button x-on:click="count--">Decrement</button> <code>count: </code><code x-text="count"></code> <button x-on:click="count++">Increment</button> </div>

Esta es toda mi pagina:

 <!DOCTYPE html> <html> <body> <h1>Works</h1> <div x-data="{ count: 0 }"> <button x-on:click="count--">Decrement</button> <code>count: </code><code x-text="count"></code> <button x-on:click="count++">Increment</button> </div> <div x-data="{ open: false }"> <button @click="open = ! open">Expand</button> <div x-show="open"> Content... </div> </div> <div x-data="{ title: 'Start Here' }"> <h1 x-text="title"></h1> </div> <button x-data="{ label: 'Click Here' }" x-text="label"></button> <h1>Doesn't work</h1> <button x-on:click="console.log('test')">Log</button> <button x-on:click="alert('Hello World!')">Say Hi</button> <button @click="$event.target.remove()">Remove Me</button> <div @foo="console.log('foo was dispatched')"> <button @click="$dispatch('foo')">Dispatch</button> </div> <script defer src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script> </body> </html>

¿Qué estoy haciendo mal?

almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Sus ejemplos que no funcionan no tienen un atributo de datos x (ya sea en sí mismos o en un padre). Ya sea que haya datos o no, se requiere el atributo x-data para obtener la funcionalidad de AlpineJS.

Si envuelve toda la sección "No funciona" en un <div x-data></div> , deberían funcionar:

 <div x-data> <button x-on:click="console.log('test')">Log</button> <button x-on:click="alert('Hello World!')">Say Hi</button> <button @click="$event.target.remove()">Remove Me</button> <div @foo="console.log('foo was dispatched')"> <button @click="$dispatch('foo')">Dispatch</button> </div> </div>
almost 3 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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda