CODEWITHSUNDEEP
vue.jsvue-directives
Oussama He
Oussama He

Reputation: 615

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

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?

Upvotes: 3

Views: 2092

Answers (2)

Excalibaard
Excalibaard

Reputation: 2073

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.

Upvotes: 2

Kevin.B
Kevin.B

Reputation: 111

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.

Upvotes: 1

Related Questions