Can't use props in event binding

[olfek]

Vue version

3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNp9UktOwzAQvcrImxapsSVAQorSUugaiQN4kyZTCI0/ssdFqMrdsZ0WhfJZvs/MmzznyB6s5YeArGSVb1xnCTxSsCupO2WNI9gYZWHnjIIZFwkk+0zqSoz+6IyAUNm+JowIoMozqOttj5u+a/YgIl+JLxNbsHF7oWrL37zRMf+YRuVJ8JKVkJnExcSEJXslsr4UImi7f+GNUWIdNeGCpk5h0Rq1vuHX/PZOtJ2nKc/Rq2LrzLtHFxMlW0yWi0ge0BUOdYsO3b9hF95vgRfaj9CUOUg9xALOVf7SPECPBNYZ62EJLe46jc8JzY+TUkt4NKbHWg9XuTktaRd0Q53R0CTDE86zcqqx7tHRXLIPE0YdW1Cx1+yJR/35oJKqbSCKa9d5bilZvo1PX/j+nAklhPj16eZWslVmY04lxh0XP8LwCRkC36M=

Steps to reproduce

See "Link to minimal reproduction"

What is expected?

working "click me" button

What is actually happening?

"click me" button doesn't work

System Info

Firefox

Any additional comments?

no

[LinusBorg]

you are missing a pair of brackets to actually call the function.

[olfek]

Ah okay, but then why does this work without a pair of brackets?

@click="clickMe"

Is this intended behavior?

[LinusBorg]

Yes. Just like you can do this:

el.addEventListener('click', clickMe)

[olfek]

Wouldn't this

@click="props.enableClick ? clickMe : undefined"

just evaluate to this

@click="clickMe"

[LinusBorg]

Yes, but it's evaluated at the time the event is triggered, not while trending the component.

So you now have an event that will return clickMe when it is triggered, but it doesn't run the Funktion unless you do.

This is what Vue differs a bit from the native API: this expression still be wrapped in a function by the compiler as as a convenience. Also makes it easier for Vue to cache it. And not re created it in every render.

<div click="props.enableClick ? clickMe : undefined">

<!-- same as -->
<div click="($event) => props.enableClick ? clickMe : undefined">
``|