Assuming I want to get the original element within the Alpine.bind method, how would I do that?
So I can retrieve properties like $el.targetName,$el.style, $el.onclick etc
For example, if I have :
<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>
I've tried $el, this(which only returns a js proxy) etc
In a component definition you have to prefix every object with this. to access the active instance of the component. So the solution is just to use this.$el to access the button HTML element:
<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>
This puts Click here in the console on click.
Note: don't forget to add x-data to the button if it does not have an Alpine.js parent element.