Is it possible somehow to v-on="{ mousedown.left: handler }"?

[VladiStep]

I want to add some event handlers conditionally, like this: <... v-on="condition ? { mousedown.left: mouseDownHandler, mouseup.left: mouseUpHandler } : null", but as far as I know it's impossible to use the event modifiers there, right?
I've tried to use 'mousedown.left': ..., but then it just doesn't work.

[VladiStep]

Just made a feature request here - vuejs/rfcs#651

[DevKame]

Maybe not the optimal way but how about you wrap the element inside a v-if and v-else?

<div class="mydiv" v-if="condition" @mousedown.left="callback"></div>
<div class="mydiv" v-else></div>

[VladiStep]

It's possible, but in my case, it's simpler to handle the keys inside the handlers.

[DevKame]

what exactly do you mean with keys? the condition? otherwise i would go

<div class="mydiv" @mousedown.left="callback(condition)"></div>
function callback(cond) {
    if(cond) {
        // do stuff
    }
}

[VladiStep]

No, I need to handle 7 events only when the condition is true, I don't want to call each handler when it's unnecessary.
I ended up doing this:

<div v-on="condition ? events : {}">...</div>

const events = {
  event1: handler1,
  event2: handler2,
  'event3Passive': handler3
};

[DevKame]

Oh wow i never heard that its possible like this, deinetly will try that out

In my ce i just have ONE callback that i want to invoke so i did not use an object. i came up with this:
<div v-on="transition_running ? moveTopLeft('top')">...</div>

where transition_running is defined as
const transition_running = ref(true);

I get this error:

where did i go wrong?

[VladiStep]

It should be v-on="transition_running ? { eventName: moveTopLeft('top') } : {}"