2

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
Oussama He
  • 555
  • 1
  • 10
  • 31

2 Answers2

1

For my part, it was because I had conflict with the directive name, I renamed it and bind it with my "custom-click-outside" and it worked.

Kevin.B
  • 81
  • 2
  • 5
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.

Excalibaard
  • 1,903
  • 9
  • 19