How to fix this error: "vnode.context[binding.expression]"?

Question

I'm building an app using VueJS. I have a component and I want to know when I click outside of it. I searched for a solution and I find this answer on Stack Overflow, but I get this error when I implemented the answer:

TypeError: vnode.context[binding.expression] is not a function

How can I fix this?

Answer 1

I used to have this problem. The fix is to bind the custom directive to a function expression, not a function call.

e.g.

<div v-custom-directive="someMethod" ></div> // GOOD

<div v-custom-directive="someMethod(argument1, argument2)" // BAD

<div v-custom-directive="() => someMethod(argument1, argument2)" // ALSO BAD?

<div v-custom-directive="e => someMethod(argument1, argument2)" // GOOD

Why?

binding.expression is a string representation of the code that should execute when the directive is triggered, which should be a function. This is - cutting some corners here - parsed with vnode.context and then called with (event). So, someMethod(argument1, argument2) will give an error, unless someMethod itself returns a function, because in reality you're calling someMethod(argument1, argument2)(event). If you wrap it in an arrow function that accepts the event as an argument, you can call a function with your desired arguments.