¿Por qué Alpine.js no funciona con todos los eventos de sus ejemplos?
Estoy probando Alpine.js, pero algunos de los ejemplos no funcionan para mí. Por ejemplo:
html
Esto no alerta nada.
html
Y esto no registra nada en la consola. Sin embargo, otras cosas funcionan:
html
recuento:
Esta es mi página completa:
<!DOCTYPE html>
<html>
<body>
<h1>Funciona</h1>
<div x-data="{ count: 0 }">
<button x-on:click="count--">Decrementar</button>
<code>recuento: </code><code></code>
<button x-on:click="count++">Incrementar</button>
</div>
<div x-data="{ open: false }">
<button @click="open = ! open">Expandir</button>
<div x-show="open">
Contenido...
</div>
</div>
<div x-data="{ título: 'Empezar aquí' }">
<h1 x-text="título"></h1>
</div>
<button x-data="{ etiqueta: 'Haga clic aquí' }" x-text="etiqueta"></button>
<h1>No funciona</h1>
<button x-on:click="console.log('prueba')">Registrar</button>
<button x-on:click="alert('¡Hola Mundo!')">Decir Hola</button>
<button @click="$event.target.remove()">Elimíname</button>
<div @foo="console.log('se despachó foo')">
<button @click="$dispatch('foo')">Despachar</button>
</div>
<script defer="" src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</body>
</html>
¿Qué estoy haciendo mal?
davy.ai
Parece que falta el atributo
x-data
en los elementos que no funcionan. El atributox-data
se utiliza para definir los datos que Alpine.js utilizará para vincular los elementos. Sin él, Alpine.js no podrá vincular los elementos correctamente.Por ejemplo, los botones de
alert
yconsole.log
deberían tener el atributox-data
de la siguiente manera:html