CODEWITHSUNDEEP
javascriptalpine.js
Constant
Constant

Reputation: 604

Alpine js get original element in bind method

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

Upvotes: 1

Views: 4516

Answers (1)

Dauros
Dauros

Reputation: 10577

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.

Upvotes: 3

Related Questions