This demo shows how to dynamically assign a DOM event to an element in Vue using Dynamic Directive Arguments.

As you cycle through different event types, that event is bound to the pink button. null can be passed as well. This will remove the event binding altogether.

The magic:

<button @[eventType]="eventHandler" />

in the above, if eventType evaluates to a string that matches an event name, then the eventHandler be bound to the button. Passing null to eventType removes the event handler.

This functionality is introduced in Vue 2.6.0 (see RFC), so make sure you have at least that version.

Dynamic Directive Arguments work for normal props and non-prop attributes as well. There are some constraints to watch out for around allowed characters in html attribute names, as well as considerations for camelCase argument names, if your rendering your Vue components in html templates, so be sure to read the docs thoroughly. 😏

📝 Vue Docs

# Demo

Vue Dynamic Directive Arguments