Me parece que la directiva x-on no funciona sin la presencia de una directiva x-data en un elemento principal. Por ejemplo, lo siguiente no funciona.
<button x-on:click='console.log("hello")'> left </button>Debe convertirse de la siguiente manera para que funcione
<div x-data="{}"> <button x-on:click='console.log("hello")'> left </button> </div> Si lo entiendo correctamente y es necesaria una directiva x-data , ¿por qué sería así?
La directiva x-data es necesaria debido a la filosofía principal del marco Alpine.js.
Con un marco completo de SPA (aplicación de una sola página), como Vue.js, el archivo index.html principal generalmente tiene solo un elemento vacío dentro <body> , como <div id="app"></div> . Luego, montamos nuestra aplicación #main en el elemento #main y Vue.js se hace cargo de toda la interfaz. Después de eso, por defecto se asume que todo es un componente Vue.js, como <MyComponent :some-data="42"></MyComponent> , por lo que no tenemos que marcarlos de ninguna otra manera.
Sin embargo, Alpine.js sigue un camino diferente. No pretende ser un marco SPA completo, como Vue.js. Su objetivo principal es "mejorar" el código de marcado frontend generado por un marco backend como Django/Laravel/etc (el autor de Alpine.js, Caleb Porzio, es el autor de Laravel Livewire ). Así que aquí, por defecto, se supone que un elemento <button> es un botón normal, no un componente de Alpine.js, por lo tanto, Alpine.js no lo escanea en busca de atributos específicos de Alpine.js, como x-on . Tenemos que agregar el atributo x-data a un elemento HTML como <button> para marcarlo como un componente Alpine.js. Después de eso, Alpine.js busca directivas como tales y se hace cargo del manejo del elemento marcado. Este método funciona bien con marcos de back-end, donde generalmente solo queremos hacer que algunos elementos sean interactivos en el frontend con Alpine.js, pero el backend maneja cualquier otra lógica.
Sin embargo, si lo desea, puede agregar un atributo x-data vacío al elemento principal <div> en su marcado, lo que hace que Alpine.js funcione como un marco SPA, por lo que escaneará cada elemento en busca de atributos específicos de Alpine.js. Eso está totalmente bien si quiere usar Alpine.js de esta manera. Pero, por lo general, podemos definir componentes reutilizables más pequeños, por lo que colocamos el atributo x-data={} en el elemento específico o en el ancestro más cercano del elemento.