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?
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>