Vue.js: anonymous function with parameter in v-on:event or @event

Question

I want to execute a simple function after an event is emitted from the child component. The problem is the child component emits data that I need as a parameter for my function.

How can I inject the parameter and run the function in one line in the component?

<div v-on:posted="runTask"> </div> 

Or

<div @posted="runTask"> </div> 

Important: I would like it to fit in the template (v-on:event or @event) because I want to keep the component in the PHP blade template.

Answer 1

For anonymous functions with parameter, use:

<div v-on:click="return function(data) { console.log(data); }"> </div> 

Or in more concise ES6:

<div v-on:click="(data) => { console.log(data); }"> </div> 

Note: You can use any variable name instead of data. Vue.js will inject the data emitted with the event into that variable name.