Suponiendo que quiero obtener el elemento original dentro del método Alpine.bind , ¿cómo lo haría? Entonces puedo recuperar propiedades como $el.targetName, $el.style, $el.onclick, etc. Por ejemplo, si tengo:
<script> document.addEventListener('alpine:init', () => { Alpine.bind('SomeButton', () => ({ type: 'button', '@click'() { // How would i get the target element with ll its DOM properties //So I can retrive properties like $el.targetName,$el.style, $el.onclick etc }, })) }) </script> Probé $el , this (que solo devuelve un proxy js), etc.
En una definición de componente, debe prefijar cada objeto con this. para acceder a la instancia activa del componente. Entonces, la solución es usar this.$el para acceder al elemento HTML del botón:
<button x-data x-bind="SomeButton">Click here</button> <script> document.addEventListener('alpine:init', () => { Alpine.bind('SomeButton', () => ({ type: 'button', '@click'() { console.log(this.$el.textContent) }, })) }) </script> Esto pone Click here en la consola al hacer clic.
Nota: no olvide agregar x-data al botón si no tiene un elemento principal Alpine.js.