¿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-dataen los elementos que no funcionan. El atributox-datase 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
alertyconsole.logdeberían tener el atributox-datade la siguiente manera:html