Vue: Can't pass a function with args to a child as a prop

[TheDutchCoder]

Vue.js version

1.0.16

Steps to reproduce

Loop over a div with a v-for to render a nested component:

<div v-for="item in items">
  <component :data="item.data" :on-select="someMethod(arg1, arg2)"></component>
</div>

The issue is that v-ref can't be used, because the v-for loop is not on the component (for lay-out reasons)

What is Expected?

someMethod(arg1, arg2) should be passed down to the child, so it can be used as a callback whenever onSelect is handled in the child.

What is actually happening?

someMethod(arg1, arg2) is not passed to the child, instead it's evaluated on runtime.
There's also no way to pass the function down with arguments without executing it on runtime.

I might be out of my depth here, but I have no clue how to solve this issue. In React I can pass down an anonymous function like so: :on-select="(foo) => { this.doSomething(foo) }", which is great because it makes my components more agnostic.

With that anonymous function stuff gets bound to scope, not sure how that works.

[yyx990803]

This is expected behavior, it should be evaluated. What you are trying to do is passing down a curried version of someMethod, so instead you can do :on-select="someMethod.bind(arg1, arg2)"

[TheDutchCoder]

Unfortunately this doesn't seem to work either.

In my child component I do the following:

select(index) {
  this.onSelect(index) // this is the 'callback'
}

The index is passed back fine, but none of the args in .bind() are available in the parent.

[yyx990803]

It should've been :on-select="someMethod.bind(this, arg1, arg2)"

https://jsfiddle.net/qqfpz5ae/

[TheDutchCoder]

Gotcha, thanks so much!

[azamat-sharapov]

Interesting.. I thought this was never accessible in VM template.

[cdierkens]

@azamat-sharapov the correction that @yyx990803 made has more to do with passing the right number of parameters.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind#Syntax
function.bind(thisArg[, arg1[, arg2[, ...]]])

https://jsfiddle.net/qqfpz5ae/109/ With null
https://jsfiddle.net/qqfpz5ae/112/ With a variable called anything that has not been declared