Encapsulating directives with x-bind and $el

[devops-at-alinea]

Alpine.js version

3.5.12

Browser and operating system

Chrome on Windows

What do you need help with?

The $el magic property doesn't seem to work within an encapsulated directive using x-bind:

        Alpine.data('textControl', () => ({
            input : {
                ['@keyup']() {
                    console.log($el);
                }
            },            
        }));

<div x-data="textControl">
    <input x-bind="input"/>
</div>

caught ReferenceError: $el is not defined

How do you expect it to work?

If I can use $el in an event:

<button @click="$el.innerHTML = 'Hello World!'">Replace me with "Hello World!"</button>

And that event can be bound in an encapsulated directive:

Alpine.data('dropdown', () => ({
    open: false,
 
    trigger: {
        ['@click']() {
            this.open = ! this.open
        },
    },
}))```

then I would expect it to work.

Please confirm

• I have searched existing discussions to check this hasn't already been answered.
• I have provided code samples as text and NOT images.

[ekwoka]

So in the JS, $el doesn't refer to anything. It's directly being used as an identifier.

binding objects allow string expressions. So you could do ['@keyup']: 'console.log($el)' to directly be able to use the magics.

Otherwise, I think this.$el could work (feels like it should but I don't immediately remember)