Vue: Allow using function call syntax to create a bound function for directive expressions

[JosephSilber]

What problem does this feature solve?

Similar to event binding, we should allow directive value to create bound functions:

<element v-directive="dontCallMeNow(parameter)"></element>

...which would be functionally similar to this:

<element v-directive="dontCallMeNow.bind(null, parameter)"></element>

This already works for event bindings:

<element @click="iAmOnlyCalledOnClick(parameter)"></element>

...so it makes sense to have the syntax be consistent.

Here's my use case

I have a throttled-click directive, which deactivates the element that was clicked until the returned promise is fulfilled. Here's a pen to better understand it: https://codepen.io/anon/pen/pPrggp

Since this is functionally similar to @click it makes sense for the same syntax to work for the both of them.

Currently, doing this:

<button v-throttled-click="move(something)">Move</button>

...will call move(something) right away, and set its returned value to binding.value, which is not what we want.

What does the proposed API look like?

<element v-directive="method(paramters)"></element>

[posva]

will call move(something) right away, and set its returned value to binding.value, which is not what we want.

Unfortunately, yes, it is. The v-on directive is an exception because you often need to execute an inline statement. On the other hand, a custom directive, as other directives, expects a value. This would also be a breaking change

You can already pass a function (no params):

<element v-directive="dontCallMeNow"></element>

and, as in your example, bind arguments with bind

<element v-directive="dontCallMeNow.bind(null, parameter)"></element>

bind being a commonly used part of js, it's better to know it and benefit from 🙂

[yyx990803]

FYI you can use v-foo="() => foo(bar)"

On Thu, May 4, 2017, 5:18 PM Eduardo San Martin Morote <
[email protected]> wrote:

will call move(something) right away, and set its returned value to
binding.value, which is not what we want.

Unfortunately, yes, it is. The v-on directive is an exception because you
often need to execute an inline statement. On the other hand, a custom
directive, as other directives, expects a value. This would also be a
breaking change

You can already pass a function (no params):

and, as in your example, bind arguments with bind

bind being a commonly used part of js, it's better to know it and benefit
from 🙂

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/vuejs/vue/issues/5588#issuecomment-299135033, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAefXvhBymyvnqg2u73h-qWaJnu80vMtks5r2ZftgaJpZM4NPZOd
.