Inline statements transformation for custom directives
What problem does this feature solve?
Custom directives with a function as a value are very useful. For example, we can create a v-click-outside
and use it like v-click-outside='onClickOutside'
, and in the directive hooks binding.value
will be the function object which can be used to register events. But when you try to use it like v-on
, for example v-click-outside='show=false'
, the value of the statement show=false
, which is false
here, will be passed to binding.value
. It could be solved like this: v-click-outside='()=>{show=false}'
but it would be better to look like v-on
What does the proposed API look like?
I don't really know what it should be look like, but there may be some works related to template compiling.
I don't think that is achievable without breaking changes (but am not sure right now), and if so, would be out of the question for the current major version.
I'm also not sure this is a good idea because unlike v-on
, which is explicitly about handler functions for events, custom directives can receie any kind of value.
So while for v-on it's intuitive that any expression is being wrapped in a function, I'm not sure it's as straightforward for custom directives.
Anyway, this should be moved to a discussion in the RFC repo if you want to continue arguing for this. www.github.com/vuejs/rfcs