How to process the emitted event from the component in v-for of Vuejs How to process the emitted event from the component in v-for of Vuejs vue.js vue.js

How to process the emitted event from the component in v-for of Vuejs


Use $event

What you need is actually v-on:item_change="status_change($event , user)".

When you do this.$emit('item_change', whatever);, whatever will become $event in the event listener.

https://jsfiddle.net/jacobgoh101/bLsw085r/1/


You need to pass $event to your status_change handler instead of item

<div id="mainapp">    <table>        <thead>            <th>Name</th>            <th>Status</th>        </thead>        <tbody>            <tr v-for="user in users">                <td>{{user.name}}</td>                <td>                    <combobox v-bind:default="user.status" v-bind:data="status_codes" v-on:item_change="status_change($event, user)"></combobox>                </td>            </tr>        </tbody>    </table></div>

JSFiddle

See the Vue docs here about event handling

Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special $event variable


Try passing parameters to your function like this:

v-on:item_change="status_change(item, user)"

And in your function declaration, specify the parameters:

status_change: function (item, user) {   console.log(item, user);}