Subscribe on changes!

Inline statements transformation for custom directives

avatar
Mar 21st 2022

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.

avatar
Mar 21st 2022

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