Alpine: $event object not accessible in event handlers added via x-spread

[allmarkedup]

When adding event handlers via x-spread it doesn't appear that the native event object is accessible to the callback function:

function Example(){
  return {
    button: {
      ['@click'](){
         // No way to access event object? No arguments are supplied
      }
    }
  }
}

I was expecting that the event handler would be called with the $event object as it's first argument - analogous to supplying a handler name in an x-on/@ directive - for example @click="myHandler"

I opened a discussion topic about this a few days ago here: https://github.com/alpinejs/alpine/discussions/617 however after further investigation this seems to me that it should be raised as an issue.

In the discussion I also mentioned access to the $dispatch utility (and I guess by extension $watch) - That would be nice but at least it's consistent with the non-x-spread behaviour. However calling an event handler with the Event object as its first argument seems like a common (and expected) pattern.

Is this a bug? It would be really nice to be able to define event handlers via x-spread for more complex components but not having access to the Event object seems to limit its usefulness.

Simple jsfiddle test here: https://jsfiddle.net/9dLv24zp/16/

[HugoDF]

This definitely sounds like an oversight in the implementation of x-spread, $event should be accessible as the first parameter to the handler.

Feel free to have a look, I don't think implementing this would be too difficult since if you define @click="something" the behaviour is to call something with event as the first Param.

If no one else is able to get to it I'll have a look this weekend.

[SimoTod]

I replied on the discussion. With that syntax, you bind @click to a function rather than a function call. As per https://github.com/alpinejs/alpine/blob/master/src/utils.js#L72, that is invoked without any params. You need to define the function in your data context and bind @click to the function call.

​function​ ​Example​(​)​{​
  ​return​ ​{​
    foo($event) {...},
    ​button​: ​{​
      ​[​'@click'​]​: 'foo'
    ​}​
  ​}​
​}

As a separate note, it's possible to change line 72 so it accepts ['@click']($event) if needed.

[HugoDF]

I think it's probably worth it to change that line 🙂

[allmarkedup]

Thanks guys - @SimoTod's solution works perfectly. I still feel the behaviour I described above is what would be expected when defining a handler in the way I described so I'll look at opening a PR to pass the $event object in when I get a chance.

Appreciate the assistance 👍